CSS: padding vs. Margin: resumen de los co­m­po­ne­n­tes del modelo de cajas

Los Cascading Style Sheets, o CSS para abreviar, se utilizan para dar un aspecto único a un sitio web. Con los elementos CSS padding y margin, puedes influir en la di­s­po­si­ción de los elementos HTML y, así, darle un estilo in­i­gua­la­ble a tu sitio web.

Antes que nada, debes conocer algunos fu­n­da­me­n­tos de HTML para poder entender cómo el CSS padding vs. margin afecta al formato y al aspecto de tu sitio web. Con el lenguaje de marcado, puedes crear toda una serie de elementos di­fe­re­n­tes que acaban ma­te­ria­li­zá­n­do­se en una presencia web. Estos elementos se dividen en dos grupos: elementos en línea y en bloque.

Los elementos HTML en línea son aquellos que fluyen junto con el texto de tu sitio web y no necesitan un párrafo propio. Los ejemplos típicos son la etiqueta em o la etiqueta b, que ga­ra­n­ti­zan que el contenido entre la etiqueta de apertura y la de cierre del script HTML se muestre en cursiva o en negrita en el navegador web.

A di­fe­re­n­cia de los elementos en línea, los elementos padres del bloque requieren su propio párrafo, por lo que te ima­gi­na­rás que son una especie de caja que ocupa todo el ancho de la pantalla. De manera análoga, evi­de­n­te­me­n­te puedes ajustar el ancho y alto de los elementos del bloque para que la caja se reduzca o amplíe con respecto a la pantalla. Los elementos de los bloques pueden alinearse entre sí, por lo que son un co­m­po­ne­n­te esencial para el diseño de un sitio web. Los re­pre­se­n­ta­n­tes típicos de esta categoría de elementos HTML son, por ejemplo, los en­ca­be­za­dos h1 a h6, así como el co­n­te­ne­dor div.

Una vez que te hayas fa­mi­lia­ri­za­do con la es­tru­c­tu­ra básica de varios elementos HTML, en­te­n­de­rás fá­ci­l­me­n­te qué significa exac­ta­me­n­te el CSS padding. En pocas palabras, padding se refiere a la distancia interna del contenido de un elemento con el borde del elemento. En este caso, también ayuda imaginar que los elementos del bloque son cajas.

Por ejemplo, si creas un co­n­te­ne­dor div, las pro­pie­da­des CSS padding-top, padding-left, padding-bottom y padding-right denotan la distancia del contenido del texto con los bordes de la caja creada para este elemento HTML.

He aquí un ejemplo de código que ayuda a ilustrar la in­te­gra­ción de CSS en HTML:

Puedes utilizar el CSS padding de di­fe­re­n­tes maneras. Un truco CSS práctico es el uso de abre­via­tu­ras. Di­fe­re­n­tes no­ta­cio­nes abre­via­das pueden ayudarte a comprimir tu código CSS según tus ne­ce­si­da­des.

El método más sencillo consiste en es­pe­ci­fi­car el espacio interno que se quiere conseguir para los cuatro bordes del elemento. Para ello, utiliza los comandos CSS padding-top, padding-left, padding-bottom y padding-right. También puedes utilizar la sintaxis abreviada:

En este caso se es­pe­ci­fi­can los cuatro valores en un solo comando. El orden es el siguiente: padding superior, padding derecho, padding inferior y padding izquierdo.

In­de­pe­n­die­n­te­me­n­te de la notación que escojas, el tamaño del padding se puede es­pe­ci­fi­car con di­fe­re­n­tes unidades. Si eliges es­pe­ci­fi­car­lo en píxeles, se trata de un valor fijo que no se verá mo­di­fi­ca­do. Si, por ejemplo, trabajas con CSS Media Queries y quieres que tu sitio web se adapte di­ná­mi­ca­me­n­te a di­fe­re­n­tes tamaños de pantalla, este enfoque no es el adecuado, y tendrías que es­pe­ci­fi­car los datos para cada tamaño de pantalla. Para ahorrarse este esfuerzo, suele uti­li­zar­se una de­fi­ni­ción po­r­ce­n­tual del espaciado interno. El po­r­ce­n­ta­je se refiere al alto o ancho de la caja.

De­pe­n­die­n­do del uso que se tenga previsto, es posible que no se necesiten los cuatro valores para ajustar el padding de un sitio web. Mencionar solo tres valores en la sintaxis abreviada de padding significa que el primer valor se utiliza para la distancia interna hacia la parte superior (padding-top), el segundo valor para la distancia interna hacia los lados (padding-right y padding-left) y el tercer valor para la distancia interna hacia la parte inferior (padding-bottom). Esto es es­pe­cia­l­me­n­te práctico si quieres centrar el contenido de un elemento en el eje ho­ri­zo­n­tal.

Mencionar solo dos valores tiene un co­m­po­r­ta­mie­n­to análogo, por lo que el primer valor se in­te­r­pre­ta como la distancia hacia arriba y abajo, y el segundo valor como la distancia hacia la derecha e izquierda.

Ya lo habrás adivinado: es­pe­ci­fi­car un único valor después del elemento CSS padding hace que el espaciado interno sea idéntico en los cuatro bordes de tu elemento. De este modo, puedes centrar el contenido pe­r­fe­c­ta­me­n­te dentro del elemento.

Al aprender sobre CSS, es difícil evitar el concepto de margin. Es un elemento CSS que también se utiliza para regular la di­s­po­si­ción de los distintos elementos HTML y de tu sitio web. En contraste con padding, margin se refiere a la distancia exterior que tiene un elemento con otros elementos vecinos o a los bordes de tu sitio web. Afo­r­tu­na­da­me­n­te, la sintaxis de margin es idéntica a la sintaxis de padding, por lo que solo hay que memorizar una notación.

Las no­ta­cio­nes abre­via­das de margin con cuatro, tres, dos o un solo valor son iguales a las no­ta­cio­nes abre­via­das de padding me­n­cio­na­das an­te­rio­r­me­n­te.

La mejor manera de ilustrar el margin exterior es utilizar un sencillo ejemplo de código en el que se crean dos co­n­te­ne­do­res div:

Siempre que quieras dar formato al contenido en relación con su elemento padre, utiliza padding. En cuanto necesites colocar elementos en relación con los demás o con el tamaño de la pantalla o de la ventana, margin es la mejor opción. En la práctica, ambos comandos CSS apenas aparecen solos. La mayoría de las veces, padding y margin deben co­m­bi­nar­se para obtener el resultado que uno desea para su sitio web. Esto es fácil de hacer nombrando ambos elementos CSS en tu archivo HTML o CSS y es­ta­ble­cie­n­do los valores co­rre­s­po­n­die­n­tes.