A diferencia de muchas otras propiedades, los márgenes verticales colapsan cuando se juntan. Lo que esto significa es que cuando el margen inferior de un elemento toca el margen superior de otro, sólo el mayor de los dos sobrevive. Aquí tienes un ejemplo sencillo:
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
div class="square red"></div>
<div class="square blue"></div>
En lugar de 70 píxeles entre el cuadrado rojo y el azul tenemos solo 40px, el margen del cuadrado azul no se tiene en cuenta en absoluto. Hay formas de combatir este comportamiento, pero es mejor acostumbrarse a él y utilizar solamente márgenes que vayan en una dirección, preferentemente margin-bottom.
Usa flexbox en tus diseños
El modelo flexbox existe por una razón. Los floats y los inline-blocks funcionan, pero todos son esencialmente herramientas para documentos de estilo, no para páginas web. El modelo flexbox, por el contrario, se ha diseñado específicamente para que sea fácil crear cualquier diseño exactamente de la forma en que fue visionado.
El conjunto de propiedades que vienen con el modelo flexbox otorga a los desarrolladores una gran flexibilidad, y una vez que te acostumbres, hacer cualquier diseño responsive es coser y cantar. La compatibilidad con navegadores actualmente es casi total, por lo que no hay nada que te impida que te tires de lleno a la piscina flexbox.
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
Haz un CSS Reset
Aunque la situación ha mejorado mucho en los últimos años, todavía hay un montón de variaciones en la forma que tienen los diversos navegadores de comportarse. La mejor manera de resolver este problema es aplicar CSS Reset que establezca los valores por defecto universales para todos los elementos, lo que te permite empezar a trabajar en una hoja de estilo limpia que producirá el mismo resultado en todas partes.
Hay librerías como normalize.css, minireset, y ress que hacen esto muy bien, corrigiendo todas las inconsistencias imaginables del navegador. Si no deseas utilizar una librería, puedes hacer un CSS Reset básico con estos estilos:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Puede parecer un poco duro, pero anulando los márgenes y los paddings trazaremos elementos de forma más sencilla ya que no hay espacios predeterminados entre ellos a tener en cuenta. La propiedad box-sizing: border-box es otro valor a tener en cuenta del cual vamos a hablar en el siguiente consejo.
Border-box para todo
La mayoría de los novatos ni conocen la propiedad box-sizing, y en realidad es bastante importante. La mejor manera de entender lo que hace, es echar un vistazo a sus dos posibles valores:
- content-box (por defecto) - Cuando establecemos una ancho o un alto a un elemento, es sólo el tamaño de su contenido. Todos los paddings y bordes están por encima de eso. Por ejemplo, un div que tiene una anchura de 100 y un padding de 10, ocupará un total de 120 píxeles (100 + 2 * 10).
- border-box - El padding y el borde se incluyen en la anchura/altura. Un div con ancho de 100px y box-sizing: border-box; tendrá 100 píxeles de ancho, sin importar los bordes o los paddings que añadas.
Definiendo un border-box a todos los elementos hace que sea mucho más fácil de personalizarlo todo, ya que no tienes que hacer cálculos todo el rato.
Imágenes como fondo
Al añadir imágenes a tu diseño, especialmente si van a ser responsive, utiliza un tag div con la propiedad background de CSS en lugar de un elemento img.
Esto puede parecer mucho trabajo para nada, pero en realidad hace que sea mucho sencillo dar estilo a las imágenes correctamente, manteniendo su tamaño original y su aspect-ratio, gracias a background-size, background-position y demás propiedades.
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('http://ejemplo.com/imagen.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
<section>
<p>Img element</p>
<img src="http://ejemplo.com/imagen.jpg" alt="imagen">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
Un inconveniente de esta técnica es que la accesibilidad de la web se verá resentida, ya que las imágenes no podrán ser rastreadas adecuadamente por los lectores de pantalla y por los motores de búsqueda. Este problema puede ser resuelto por el impresionante object-fit, pero cuenta con soporte en muchos navegadores aún.
