¿Dónde colocas tus márgenes de CSS?

Cuando desea agregar espacios en blanco entre elementos HTML (usando CSS), ¿a qué elemento lo adjunta?¿Dónde colocas tus márgenes de CSS?

estoy regularmente en situaciones a lo largo de estas líneas:

<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, dicho que quiera 1 em de espacio entre cada uno de estos elementos, pero ninguno por encima de la primera h1 o por debajo de la última div. ¿A qué elementos lo adjuntaré?

Obviamente, no hay verdadera técnica diferencia entre este:

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

... y esto ...

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

Lo que me interesa es 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 el segundo, ya que es más sencillo; 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?

Fuente

2008-09-19 Craig Walker

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; }

En su ejemplo, sin embargo, esto probablemente no es que procede, como un div pie de página lo más probable es tener 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".

Fuente

2008-09-19 22:32:55 Pavling

Si no te importa rehuir IE6 siempre puedes recurrir a los pseudo selectores de CSS2: first-child y: last-child para hacer tus pujas! –

De acuerdo con http://www.quirksmode.org/css/contents.html,: last-child solo es compatible con IE9, por lo tanto, si desea tener los márgenes adecuados en IE7/IE8, aún necesita usar clases. :( –

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. El <p> (y la etiqueta <h1> también, creo) generalmente tendrá márgenes predeterminados proporcionados por el navegador si no se especifica ninguno.

Fuente

2008-09-19 22:33:21

Esto va a ser impulsado en parte por los detalles de lo que usted está diseñando para, pero hay una especie de jerarquía áspera a estas cosas en, digamos, un índice típico blog:

Vas tener un pie de página en una página.
Va a tener un encabezado por entrada.
Tendrás n párrafos por entrada.

Establezca el espacio en blanco para sus párrafos sabiendo que a veces se producirá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 esbozo de miniatura. En última instancia, cómo terminas asignando tu relleno depende totalmente de ti, pero si lo abordas desde una perspectiva ascendente, es probable que veas menos sorpresas a medida que modificas primero los elementos más comunes/abundantes y luego después el menos comunes.

Fuente

2008-09-19 22:34:59

Si quiere algo de espacio alrededor de un elemento, déle un margen. Eso significa que, en este caso, no solo dé al <h1> un margen inferior, sino que otorgue un margen superior a <p>.

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. Entonces esto:

h1, p { margin: 1em; } 

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

... daría lugar a un espacio de 1em entre el encabezado y el párrafo.

Fuente

2008-09-19 23:03:56 Jim

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.

Dada esta marcado (He añadido una cabecera y coloca las identificaciones 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>

Debe utilizar este CSS:

#header { 
    margin-bottom: 1em; 
} 

#footer { 
    margin-top: 1em; 
} 

h1, p { 
    margin: 1em 0; 
}

Ahora el orden de sus 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ó.

Fuente

2008-09-21 05:35:17 Prestaul

Utilizando los selectores CSS 2 avanzados, otra solución sería posible que no dependa de una clase last para introducir información de diseño en el HTML.

La solución usa adjacent selectors. Desafortunadamente, MSIE 6 aún 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 manera, el primer h1 no tendrá un margen superior mientras que cualquier h1 que sigue inmediatamente un párrafo o una caja tiene un margen superior.

Fuente

2008-09-21 17:44:15

Soy un principiante relativo, pero mi propia solución a 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 una espaciado 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!

Fuente

2009-04-25 10:12:24

Acabo de usar el primer hijo y el último hijo. Así por ejemplo, en CSS claro:

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 se puede aplicar esto a más elementos y la estructura es más agradable si se utiliza SASS, MENOS etc :)

Fuente

2015-11-27 10:13:35 JDavies

Esto es como debe ser hecho:

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

Ahora usted no tiene que preocuparse de lo que es el elemento primero y qué elemento es el pasado, y que no tiene que colocar siempre una clase especial en el último elemento.

La única vez que esto no "funcionará" es cuando el último hijo es uno que no se procesa. En esta situación, puede considerar aplicar margin-bottom:0; usando una clase en su último hijo visible.

Fuente

2016-01-14 21:05:18

¿Dónde colocas tus márgenes de CSS?

Respuesta

Cuestiones relacionadas