Márgenes y rellenos en CSS

← Diseño Web ⌂ Home

¿Qué son los márgenes?

Los márgenes en CSS son el espacio que separa a los elementos html entre sí. Hay elementos de html que traen márgenes predefinidos en los estilos propios del navegador como el caso de: body, h1, h2, h3, h4, h5, h6, ol, ul, li, p, y muchos otros.

Cuando hay dos márgenes de elementos diferentes que colindan entre sí, se presenta una situación llamada margin collapsing en la que el mayor margen de los dos se superpone al otro.

Margin Collapsing

Se puede asignar una medida de margin para los cuatro lados del elemento, o márgenes individuales para cada uno de los lados con: margin-top, margin-right, margin-bottom y margin-left.

Se puede centrar un elemento html colocando el valor de margin: 0 auto, cuando dicho elemento tiene display block.

¿Qué son los rellenos?

Así como el margen separa a los elementos html entre sí, la propiedad padding de relleno, permite definir una separación entre el contenido interno y el borde de un elemento.

Al inspeccionar los elementos html en el navegador, se puede apreciar el margin con color naranja y el padding con color verde.

Una forma de identificar cuándo es mejor usar margin o padding en un elemento, es evaluando la necesidad de usar borde o background, ya que son éstos: el borde y el background, los que realmente diferencian el uso de uno u otro.

Continuando con nuestro código eliminaremos los margenes laterales aplicando al body un margen:

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

Y agregaremos los márgenes y rellenos en los elementos de cada una de las playeras:

.tshirt {
    border-color: #3B3B3B;
    border-width: 1px;
    border-style: solid;
    /* border: 1px solid #3B3B3B*/

    border-top-right-radius: 50px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 50px;

    margin: 10px;
    padding: 20px;
}

Y para tener un mejor contraste cambiamos el color de fondo de la sección de las más vendidas y cada una de las playeras.

.tshirts {
    background-color: #fafafa;
}

.tshirt {
    border-color: #3B3B3B;
    border-width: 1px;
    border-style: solid;
    /* border: 1px solid #3B3B3B*/

    border-top-right-radius: 50px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 50px;

    margin: 10px;
    padding: 20px;
    background-color: white;
}