Onde você coloca suas margens CSS? [fechadas]

https://stackoverflow.com/questions/106137

css
margin

01-07-2019
|

Pergunta

Quando você deseja adicionar espaço em branco entre elementos HTML (usando CSS), a qual elemento você anexá-lo?

Estou regularmente em situações ao longo destas linhas:

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div>This is a footer</div>
</body>

Agora, digamos que eu queria 1em de espaço entre cada um destes elementos, mas nenhum acima do primeiro h1 ou abaixo da última div. Para que os elementos que eu anexá-lo?

Obviamente, não há verdadeira técnico diferença entre este:

h1, p { margin-bottom: 1em; }

... e isto ...

div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }

O que me interessa é fatores secundários:

Consistência
Aplicabilidade a todas as situações
Facilidade / Simplicidade
A facilidade de fazer alterações

Por exemplo: neste cenário específico, eu diria que a primeira solução é melhor do que o segundo, porque é mais simples; você só está anexando um-bottom margem de dois elementos em uma única definição de propriedade. No entanto, eu estou procurando uma solução mais de uso geral. Toda vez que faço o trabalho CSS, fico com a sensação de que há uma boa regra de ouro para aplicar ... mas eu não tenho certeza o que é. Alguém tem um bom argumento?

Solução

Eu costumo usar uma margem inferior em elementos quando eu quero que eles tenham espaço antes do próximo elemento, e, em seguida, usar um ".last" classe no css para remover a margem do último elemento.

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div class="last">This is a footer</div>
</body>

div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }

No seu exemplo, porém, isso provavelmente não é que aplicável, como uma div rodapé provavelmente teria a sua própria classe e estilo específico. Ainda o ".last" aproximar eu usei obras para mim quando eu tenho vários elementos idênticos, um após o outro (parágrafos e que-não). Claro, eu cherry-escolheu a técnica do quadro CSS "Elements".

Outras dicas

Usando avançados CSS 2 seletores, outra solução seria possível que não depende de um last classe para introduzir informações de layout para o HTML.

A solução utiliza a selectores adjacentes . Infelizmente, MSIE 6 não apoiá-lo ainda tão relutância em usar é compreensível.

h1 {
    margin: 0 0 1em;
}

div, p, p + h1, div + h1 {
    margin: 1em 0 0;
}

Desta forma, o primeiro h1 não terá uma margem superior enquanto qualquer h1 que segue imediatamente um parágrafo ou uma caixa tem a margem superior.

Se você quiser algum espaço em torno de um elemento, dar-lhe uma margem. Isso significa que, neste caso, não apenas dar o <h1> uma margem inferior, mas dar <p> uma margem superior.

Lembre-se, quando dois elementos são verticalmente adjacente e eles não têm uma borda ou preenchimento entre eles, suas margens de colapso. Isso significa que apenas a maior das duas margens é considerado - eles não se somam. Portanto, esta:

h1, p { margin: 1em; }

<h1>...</h1>
<p>...</p>

... resultaria em um espaço 1em entre o título eo parágrafo.

Este vai ser impulsionado em parte pelas especificidades do que você está projetando para, mas há uma espécie de hierarquia bruto para essas coisas, digamos, um índice típico blog:

Você vai ter um rodapé em uma página.
Você vai ter um cabeçalho por entrada .
Você vai ter n parágrafos por entrada.

Estabelecer espaços em branco para os seus parágrafos, sabendo que eles estão indo para ocorrer às vezes em seqüência - você precisa se preocupar com sua aparência como uma série. A partir daí, ajustar seus cabeçalhos para lidar com limites entre entradas. Finalmente, ajustar seu rodapé / corpo espaçamento para garantir que a parte inferior da página parece decente.

É uma miniatura esboço. Como você finalmente acabam atribuindo o seu preenchimento é inteiramente até você, mas se você abordá-lo de uma perspectiva de baixo para cima você provavelmente verá menos surpresas como você ajuste primeiro o mais comum / elementos abundantes e em seguida, depois os menos comuns.

O ponto que Jim está fazendo é a chave. Margens colapso entre os elementos, que não são aditivos. Se o que você quer é assegurar que há uma margem de 1em acima e abaixo de parágrafos e cabeçalhos e que existe uma margem de 1em abaixo do cabeçalho e acima do rodapé, em seguida, seu css deve refletir isso.

Dada essa marcação (Eu adicionei um cabeçalho e ids colocado no cabeçalho / rodapé):

<body>
  <div id="header"></div>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div id="footer">This is a footer</div>
</body>

Você deve usar este CSS:

#header {
  margin-bottom: 1em;
}

#footer {
  margin-top: 1em;
}

h1, p {
  margin: 1em 0;
}

Agora, a ordem dos elementos não importa. Se você usar dois títulos consecutivos, ou iniciar a página com um parágrafo, em vez de um título que ainda irá processar a maneira que você indended.

Eu sou um novato relativa, mas a minha própria solução para a coisa que eu acho que você e eu vim contra (margens de mudança para uma tag pode resolver espaçamento em uma parte de um site, só para perturbar um previamente um bom espaçamento em outro lugar?) agora é alocar uma margem superior igual e inferior para todas as tags. Você pode muito bem querer mais espaço acima e abaixo de um H1 do que para um H3 ou ap, mas em geral eu acho que as páginas ficam bem com espaços iguais acima e abaixo de qualquer pedaço de texto, assim que esta solução funciona bem para mim e atenda a sua 'simples regra de ouro' especificação também, espero!

Esta é a forma como isso deve ser feito:

body > * {
    margin-bottom: 1em;
}
body > *:last-child {
    margin-bottom: 0;
}

Agora você não precisa se preocupar com o elemento é o primeiro e o elemento é passado, e você não tem que sempre colocar uma classe especial em seu último elemento.

A única vez que isso não vai "trabalhar" é quando a última criança é aquele que não é processado. Nessa situação, você pode considerar a aplicação margin-bottom:0; usando uma classe em seu último filho visível.

Eu tendo a concordar com você que a primeira opção é melhor. Em geral, é o que eu gosto de fazer. No entanto, há um argumento a ser feito que você deve especificar uma margem para cada um desses elementos e zero-lo para fora se você não quer aplicá-lo desde navegadores todas as margens manuseada diferentemente. O

(e tag

também eu acho) geralmente têm margens padrão dado pelo navegador se nenhum for especificado.

Eu apenas utilizado pela primeira vez com crianças e última criança. Assim, por exemplo em CSS simples:

h1{
    margin-top:10px;
    margin-bottom:10px;
}
h1:first-child{
    margin-top:0px;
}
p{
    margin:10px;
}
p:first-child{
    margin-top:0px;
}
p:last-child{
    margin-bottom:0px;
}

Este é um exemplo básico, mas você pode aplicar isso a mais elementos e estrutura é melhor se utilizando SASS, LESS etc:)

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow