CSS, divs aninhadas & margens vs. preenchimento

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

Pergunta

i compreender totalmente o modelo de caixa. esta questão é mais sobre a tentativa de definir uma metodologia semântica sobre quando usar margens e quando usar estofamento.

aqui é um exemplo típico,

Em primeiro lugar, na planície Inglês:

  • situação: temos um div recipiente, dentro do qual existe um elemento de parágrafo.

  • objetivo:. Ter um espaço de 12px entre o interior da div eo exterior do parágrafo

  • opção a) aplicar 12px de padding para o recipiente div

  • opção b) aplicar 12px margens ao elemento parágrafo

ou, se preferir, HTML: 

<div id="container">
    <p>Hello World!</p>
</div>

e, CSS:

opção a) 

div#container {padding: 12px;}

opção b) 

p {margin: 12px;}

Felicidades!

Jon

Foi útil?

Solução

Pessoalmente, eu prefiro a opção A. Por quê? Diga agora eu tenho que adicionar outros elementos HTML no div e eu quero o estofo para ser mantida, eu não teria que adicionar outras regras para os meus arquivos CSS para fazê-lo funcionar.

Outras dicas

Guarnições e margens dá o mesmo efeito, exceto nos seguintes casos (eu poderia perder alguns):

  1. Você tem algum tipo de propriedades do fundo. Margens não vai buscá-los.
  2. Você tem uma borda
  3. Você usa TD (sem margens)
  4. Dois itens aninhados, as margens são recolhidos em conjunto, onde paddings não.
  5. (necessidade de verificar este) Eles provavelmente afetar a largura e altura do elemento diferente. (Se alguém sabe melhor, pls edições desta).

Este é um bug no css, Aqui estão alguns exemplos:

http://creexe.zxq.net/div-issue-padding.html = questão preenchimento

http://creexe.zxq.net/div-issue-margin.html = questão da margem

as tags div vermelho e verde nos exemplos foram criados pelo TOP propriedade css, mas tem as suas desvantagens athat superior, inferior etc funciona apenas quando a posição do tag div é absoluta e relativa, mas não estático

Depende do que você está tentando realizar visualmente. Seria container ter outros elementos filhos que pode pendurar sobre para a sarjeta em ambos os lados do parágrafo? Se assim for, uma margem faz mais sentido. Mas se container deve ter uma calha 12-pixel para todos os elementos, período, faz mais sentido usar o preenchimento para evitar ter de aplicar margens para vários conjuntos de elementos.

De um modo geral você sempre quer parágrafos para ter margens verticais para garantir parágrafo consistente líder.

Pessoalmente, eu iria com opção de um dos #container {padding: 12px;} porque faz muito claro que todas elementos filho devem ficar 12px de distância da fronteira deste div.

Se eu quiser outros elementos para ficar mais de 12px longe da fronteira do #container, então eu aplico como muito mais margem a esse elemento.

Felicidades!

estofamento Vertical sobre a divisão - porque se eu decidi que queria uma quantidade diferente de espaço vertical entre os vários parágrafos eu usaria margens inferior e parte superior de preenchimento / fundo da divisão delimitador praticamente vai ficar sempre intacta assumindo você só tem elementos staticly posicionados dentro.

A diferença é que a fronteira se senta.

A fronteira fica bem no meio das margens e preenchimento. Se você especificar as margens, que é branco fora do espaço da fronteira.

Se você especificar preenchimento, que é branco dentro do espaço da fronteira (empurra a fronteira mais longe do elemento)

Não é possível mostrar aqui devido à css stripping, mas tentar fazer isso: 

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

outras coisas!

  • estofamento traz na cor do elemento de fundo, as margens são basicamente transparente

  • alguns elementos (como td) parecem ignorar as margens, enquanto eles respondem às mudanças no preenchimento

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top