que - Css margen superior vs margen inferior

que es margin y padding en css

Question

Si tiene una secuencia de elementos de bloque y quiere colocar un margen entre ellos.

¿Cuál prefieres, margin-top o margin-bottom o ambos? ¿Por qué?

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

Nombrar clases después de su comportamiento en lugar de su contenido es una especie de pendiente resbaladiza, 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 quieras que los elementos se acumulen. ¿Quieres espacio extra en la parte superior o inferior?

Answer 2

Depende del contexto. Pero, generalmente margin-top es mejor porque puede usar :first-child para eliminarlo. Al igual que:

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.

Answer 3

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

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

Esto selecciona el último elemento, lo que 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.

Answer 4

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 sólido cuando utilizas contenido dinámico

HTML (Razor View Engine)

<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="topic@(i == Model.ActiveTopics.Count - 1 ? " last" : "")">
                ...                                 
          </div>
      }
   }
</div>

Answer 5

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, pondría margin-top en <p> , porque la descripción no tendría mucho sentido sin el título, pero la descripción tiene cierto potencial para ser eliminada, si quisiera mencionar el título.

Otro ejemplo:

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

Aquí, 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.

Answer 6

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