CSS Margin y Padding

Margin y padding son dos propiedades fundamentales de CSS que definen los espacios entre y dentro de los elementos. Margin controla el espacio exterior de un elemento, mientras que padding regula el espacio interno entre el contenido y el borde.

Fundamentos de margin y padding

Margin es el espacio exterior que separa un elemento de otros. Padding es el espacio interior entre el contenido y el borde. Ambos pueden configurarse por separado o juntos.

En este ejemplo, un elemento <div> recibe valores de margin y padding, mostrando claramente la diferencia entre espacio exterior e interior:

Margin y padding específicos por lado

Tanto margin como padding se pueden definir individualmente para cada lado: top, right, bottom y left. Por ejemplo, <margin: 10px 20px 30px 40px;> asigna valores diferentes a los cuatro lados.

Centrado con margin

La regla <margin: 0 auto;> aplicada junto con un ancho permite centrar un elemento horizontalmente. Esta técnica se usa frecuentemente para centrar contenedores.

Consejos para usar margin y padding

Configurar adecuadamente margin y padding ayuda a crear sitios claros y bien estructurados. Aquí algunos consejos:

• Usa valores consistentes de espaciado para lograr una apariencia armoniosa.
• Evita márgenes innecesariamente grandes, ya que generan demasiado espacio vacío.
• El padding mejora la legibilidad si dejas suficiente espacio entre el texto y el borde.