margen inferior o margen superior | Programar Plus

Publiqué una encuesta sin contexto en Twitter, solo por diversión.

ok vamos a hacer esto

—Chris Coyier (@chriscoyier) 1 de diciembre de 2016

El contexto implícito, como la mayoría de los nerds de CSS probablemente podrían sospechar, es:

Para espaciar elementos verticalmente unos de otros, ¿usualmente opta por margin-bottom en el elemento superior, o margin-top en el elemento inferior?

El 61 % de ~2000 votos dijeron que el margen era inferior. Supuse que ganaría, pero no lo sospechaba tan estrechamente. La web se siente como un tipo de medio de empuje hacia abajo y diría que se siente más lógico/natural aplicar espaciado al primer elemento en lugar del segundo.

De una forma u otra, es común tener que quitar el espaciado de un lado o del otro. Más o menos como:

.module > *:last-child {
  margin-bottom: 0;
}

/* or */

.module > *:first-child {
  margin-top: 0;
}

Pero no leas demasiado en eso. Hay un millón de formas de manejar la estructura, el espaciado, los selectores y todo eso. Sólo quiero decir: es un caballo cada uno. Uno no es mejor que el otro. Tampoco es necesario que sean mutuamente excluyentes, pero recuerda cómo colapsan.

Greg Whitworth señaló que la parte superior del margen en realidad tiene un borde estrecho en “una lata de Bing de 1,070,510 páginas”.

Datos de aquí

Pero como señaló Estelle Weyl, eso proviene principalmente de personas que restablecen esos valores, no usándolos activamente para espaciar. Sería interesante ver esos mismos datos con valores distintos de cero.