Posteriormente a consultar especialistas en este tema, programadores de diversas áreas y profesores hemos dado con la respuesta al problema y la plasmamos en este post.
Solución:
Depende del contexto. Pero, en general margin-top es mejor porque puedes usar :first-child para quitarlo 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.
siempre uso margin-bottomlo que significa que no hay espacio innecesario antes del primer elemento.
La respuesta más votada aquí está un poco desactualizada, en el sentido de que dice que la ventaja de ir margin-top es que luego puedes usar :first-child (pero a partir de 2018, podría usar margen inferior en combinación con :último niño con igual apoyo).
Sin embargo, la razón para preferir margen superior con: primer hijo (en lugar de margen inferior con :último niño) se explica en detalle en este artículo CSS: margen superior vs inferior.
Básicamente, dice que si tiene un bloque entre otros bloques similares y desea que los márgenes de este bloque (superior e inferior) sean diferentes a los del resto, tendrá más problemas porque no hay una manera fácil de seleccionar los elementos anteriores, pero con el selector de hermanos adyacentes (+) es posible lograr esto sin necesidad de clases de ayuda:
Utilizando el margen superior con: primer hijo estructura, el CSS requerido para dar el espacio adecuado al anuncio es:
article
margin-top: 2em;
article:first-child
margin-top: 0;
//space at the top of the Ad
.ad
margin-top: 1em;
//and to reduce space below the ad
.ad + article
margin-top: 1em;
Aquí puedes ver las reseñas y valoraciones de los lectores
Te invitamos a añadir valor a nuestra información cooperando tu veteranía en los informes.