style - ¿Dónde colocas tus márgenes de CSS?
padding css (9)
Esto va a ser impulsado en parte por los detalles de lo que está diseñando, pero hay una especie de jerarquía aproximada a estas cosas en, por ejemplo, un índice de blog típico:
- Tendrás un pie de página en una página.
- Tendrás un encabezado por entrada .
- Tendrás n párrafos por entrada.
Establezca espacios en blanco para sus párrafos sabiendo que a veces ocurrirán en secuencia: debe preocuparse por cómo se ven como una serie. A partir de ahí, ajuste sus encabezados para lidiar con los límites entre las entradas. Finalmente, ajuste el espaciado entre el pie de página y el cuerpo para asegurarse de que la parte inferior de la página se vea decente.
Es un boceto en miniatura. En última instancia, cómo terminas asignando tu relleno depende totalmente de ti, pero si lo enfocas desde una perspectiva ascendente, es probable que veas menos sorpresas a medida que cambias primero los elementos más comunes / abundantes y luego los menos comunes.
Cuando desee agregar espacios en blanco entre elementos HTML (usando CSS), ¿a qué elemento lo adjunta?
Regularmente estoy en situaciones en este sentido:
<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>
Ahora, digamos que quería 1em de espacio entre cada uno de estos elementos, pero ninguno por encima del primero h1 o por debajo del último div. ¿A qué elementos lo adjuntaré?
Obviamente, no hay una diferencia técnica real entre esto:
h1, p { margin-bottom: 1em; }
...y esto...
div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }
Lo que me interesa son factores secundarios:
- Consistencia
- Aplicabilidad a todas las situaciones
- Facilidad / Simplicidad
- Facilidad de hacer cambios
Por ejemplo: en este escenario particular, diría que la primera solución es mejor que la segunda, ya que es más simple; solo está adjuntando un margen inferior a dos elementos en una sola definición de propiedad. Sin embargo, estoy buscando una solución más general. Cada vez que trabajo CSS, tengo la sensación de que hay una buena regla de oro para aplicar ... pero no estoy seguro de qué se trata. ¿Alguien tiene una buena discusión?
Si quieres algo de espacio alrededor de un elemento, dale un margen. Eso significa que, en este caso, no solo le dé al <h1> un margen inferior, sino que le dé a <p> un margen superior.
Recuerde, cuando dos elementos son adyacentes verticalmente y no tienen un borde o relleno entre ellos, sus márgenes colapsan. Eso significa que solo se considera el mayor de los dos márgenes, no se suman. Así que esto:
h1, p { margin: 1em; }
<h1>...</h1>
<p>...</p>
... daría como resultado un espacio de 1 em entre el encabezado y el párrafo.
Tiendo a estar de acuerdo contigo en que la primera opción es mejor. Generalmente es lo que me gusta hacer. Sin embargo, hay un argumento que debe hacerse para especificar un margen para cada uno de esos elementos y ponerlo a cero si no desea aplicarlo, ya que todos los navegadores manejan los márgenes de forma diferente. La etiqueta <p> (y la etiqueta <h1> también, creo) generalmente tendrá márgenes predeterminados proporcionados por el navegador si no se especifica ninguno.
Utilizando selectores avanzados de CSS 2, sería posible otra solución que no dependa de una last clase para introducir información de diseño en el HTML.
La solución usa los selectores adyacentes . Desafortunadamente, MSIE 6 no lo admite, por lo que la reticencia a usarlo es comprensible.
h1 {
margin: 0 0 1em;
}
div, p, p + h1, div + h1 {
margin: 1em 0 0;
}
De esta forma, la primera h1 no tendrá un margen superior, mientras que cualquier h1 que siga inmediatamente a un párrafo o una casilla tendrá un margen superior.
Soy relativamente novato, pero mi propia solución para lo que creo que usted y yo enfrentamos (cambiar los márgenes de una etiqueta puede ordenar el espaciado en una parte de un sitio, solo para alterar un espacio previamente bueno en otro lugar). ahora es asignar un margen igual arriba y abajo para todas las etiquetas. Es posible que desee más espacio por encima y por debajo de un H1 que para un H3 o ap, pero, en general, creo que las páginas se ven bien con espacios iguales arriba y abajo de cualquier texto dado, por lo que esta solución funciona bien para mí y cumple con su ''simple regla general ''también, ¡con suerte!
Acabo de usar el primer hijo y el último hijo. Entonces, por ejemplo, en CSS simple:
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 es un ejemplo básico, pero puedes aplicar esto a más elementos y la estructura es más agradable si usas SASS, LESS etc :)
Asi es como debería de hacerse:
body > * {
margin-bottom: 1em;
}
body > *:last-child {
margin-bottom: 0;
}
Ahora no tiene que preocuparse por qué elemento es el primero y qué elemento es el último, y no tiene que colocar siempre una clase especial en su último elemento.
El único momento en que esto no "funcionará" es cuando el último niño es uno que no se representa. En esta situación, podría considerar aplicar margin-bottom:0; usando una clase en tu último hijo visible.
El punto que Jim está haciendo es la clave. Los márgenes colapsan entre los elementos, no son aditivos. Si lo que quiere es asegurarse de que haya un margen de 1em por encima y debajo de los párrafos y encabezados y que haya un margen de 1em debajo del encabezado y encima del pie de página, entonces su CSS debe reflejar eso.
Dado este marcado (he agregado un encabezado y colocado identificadores en el encabezado / pie de página):
<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>
Deberías usar este css:
#header {
margin-bottom: 1em;
}
#footer {
margin-top: 1em;
}
h1, p {
margin: 1em 0;
}
Ahora el orden de tus elementos no importa. Si usa dos encabezados consecutivos o comienza la página con un párrafo en lugar de un encabezado, seguirá representando la forma en que ingresó.
Tiendo a utilizar un margen inferior en los elementos cuando quiero que tengan espacio antes del siguiente elemento, y luego utilizar una clase ".last" en el CSS para eliminar el margen del ú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; }
Sin embargo, en su ejemplo, esto probablemente no sea aplicable, ya que un div de pie de página probablemente tenga su propia clase y un estilo específico. Todavía el enfoque ".last" que utilicé funciona para mí cuando tengo varios elementos idénticos uno después del otro (párrafos y lo que no). Por supuesto, escogí la técnica desde el marco CSS de "Elementos".