Css margin-top vs margin-bottom

15

Siempre uso margin-bottom, lo que significa que no hay espacio innecesario antes del primer elemento.

2008-11-12 18:28:09

+0

También estoy utilizando este enfoque en estos días. Parece muy natural/lógico, y a menudo el margen después de algo está más relacionado lógicamente con esa cosa que el margen anterior, si eso tiene algún sentido. Sin embargo, tengo problemas para poner menos espacio entre los elementos del mismo tipo (como las etiquetas P) que el espacio que hay entre los elementos de tipo diferente. Y a partir de algunos de los ejemplos en esta página, parece que ir por la ruta de margen superior ofrece una solución más elegante. Pero no sé. Creo que comenzaré otro hilo SO para esa pregunta específica. – sugardaddy

+0

Cambié a esto después de haber sido mordido por 'margin-top' varias veces. Si bien @sblundy tiene un punto, nunca me encontré en la necesidad de esa solución. Pero, de nuevo, uso React con SASS y Radium, lo que hace obsoletos muchos hacks de CSS inventados a lo largo de los años. – BAR

31

Depende del contexto. Pero, generalmente margin-top es mejor porque puede usar :first-child para eliminarlo. De esta manera:

div.block { 
    margin-top: 10px; 
} 

div.block:first-child { 
    margin-top: 0; 
}

De esta manera, los márgenes están solo entre los bloques.

Solo funciona para navegadores más modernos, obviamente.

Fuente

2008-11-12 18:30:51 sblundy

+0

Tenga en cuenta que los pseudo-elementos como este tienden a romperse en los navegadores más antiguos. – thismat

+0

funciona en IE <= 6 – ken

+0

He tenido problemas con pseudo clases como esta antes, y tiendo a apartarme de ellas hasta que los navegadores más modernos se vuelven "viejos". – thismat

1

@This Mat - No estoy de acuerdo con su enfoque. Asignaría espacio a los elementos de forma semántica y usaría selectores contextuales para definir el comportamiento de esa colección de elementos.

.content p { /* obviously choose a more elegant name */ 
    margin-bottom: 10px; 
}

clases de denominación después de su comportamiento en lugar de su contenido es una especie de un terreno resbaladizo, y enturbia la naturaleza semántica de su HTML. Por ejemplo, ¿qué pasa si en un área de su página, todos los elementos con clase .top10 de repente necesitan 20 píxeles? En lugar de cambiar una sola regla, debe crear un nuevo nombre de clase y cambiarlo en todos los elementos que desea afectar.

Para responder a la pregunta original, depende completamente de cómo quiera que los elementos se acumulen. ¿Quieres espacio extra en la parte superior o inferior?

Fuente

2008-11-15 18:41:12

0

Sí, suelo usar margin-bottom también y luego asignar una última clase a la última del grupo. Asumiendo que quieres un estilo diferente en esto.

.discussion .detailed.topics { margin: 20px 0 }  
.discussion .detailed.topics .topic { margin-bottom: 30px } 
.discussion .detailed.topics .topic.last { margin-bottom: 0 }

Este es un enfoque fuerte cuando el uso de contenidos de forma dinámica impulsada

HTML (Razor Ver motor)

<div class="detailed topics"> 
    @if (Model.ActiveTopics != null && Model.ActiveTopics.Count > 0) 
    { 
     for (int i = 0; i < Model.ActiveTopics.Count(); i++) 
     { 
      var topic = Model.ActiveTopics[i]; 
      <div class="[email protected](i == Model.ActiveTopics.Count - 1 ? " last" : "")"> 
       ...         
      </div> 
     } 
    } 
</div>

Fuente

2011-02-14 19:28:59

+0

De hecho, uso un enfoque similar a este, excepto que tengo una clase para los elementos superiores/primeros. A menudo no necesito usar esa clase debido al comportamiento de colapso de margen de todos modos. Pero me gusta poner la clase "impar" en la primera porque es más probable que agregue a la lista de bloques en lugar de anteponer (y por lo tanto, agregar requiere menos edición para seguir moviendo la "última" clase al último elemento) – sugardaddy

9

Otra opción es utilizar el selector + combinado con margin-top:

.article + .article { 
    margin-top: 10px; 
}

Esto selecciona el último elemento, que h significa que la regla no se aplicará al primer elemento en absoluto. No hay clases adicionales, pseudo clases o espacio encima o debajo de los elementos.

Fuente

2013-02-14 22:25:49 thordarson

0

Siempre pongo margen al elemento que considero más opcional. Es decir, al elemento que más probablemente se eliminaría de DOM. Ejemplo:

<div class="title">My Awesome Book</div> 
<p>Description of My Awesome Book</p>

En este caso, me pondría a margin-top<p>, porque la descripción no tendría mucho sentido sin el título, pero la descripción tiene cierto potencial para ser eliminado, si quería simplemente mencionar el título.

Otro ejemplo:

<img src="icon.png"> 
<div>My Awesome Book</div>

Aquí, yo haría lo contrario. Agregaría margin-bottom al ícono. Considero que el ícono es solo una decoración y, una vez más, tiene más potencial para ser eliminado.

Esta es mi filosofía. Elementos de estilo la forma de evitar cambios CSS a través de posibles cambios DOM.

Fuente

2016-06-27 11:38:43

Respuesta

Cuestiones relacionadas