Padding vs Margin: ¿Qué son y cuándo usarlos?<\/h2>
Tanto el relleno como el margen se utilizan para crear un tema de WordPress<\/a> y personalizar el diseño de un sitio web. Sin embargo, cada uno tiene sus propios propósitos y funciones.<\/p> La propiedad padding es la que crea el espacio o área alrededor del contenido de un elemento. Consiste en el relleno superior, derecho, inferior e izquierdo. En CSS se escriben como padding-top:<\/strong>, padding-right:<\/strong>, padding-bottom: <\/strong>y padding-left:<\/strong>. Sus valores por defecto son 0.<\/p> Para añadir relleno a un elemento, puedes establecer los valores en:<\/p> Ten en cuenta que no puedes utilizar valores negativos y automáticos para los rellenos.<\/p> Este es un ejemplo de código CSS<\/a> de padding estándar:<\/p> El padding tiene una propiedad abreviada: padding:<\/strong>. Simplifica el código anterior a un código de una sola línea. Esto es para evitar tener un archivo CSS largo, que puede ralentizar el tiempo de carga de tu sitio.<\/p> La propiedad abreviada padding puede tener de uno a cuatro valores:<\/p> Ten en cuenta que cuando fijas el ancho de un elemento, los paddings se sumarán al ancho total. Observa el siguiente ejemplo:<\/p> El ancho total del elemento es de 300px, o sea 250px más 25px de padding derecho y 25px de padding izquierdo. Si quieres que un elemento tenga una anchura específica, ten en cuenta la longitud del padding.<\/p> Utiliza el padding cuando no quieras que el contenido de un elemento toque los bordes de su contenedor. También puedes utilizarlo para aumentar y disminuir el tamaño de los elementos web.<\/p> Tomemos de ejemplo el elemento “Buttons”. El padding es el área que rodea la etiqueta o el texto del botón. Cuando editas el padding, afectará al tamaño del botón porque tendrás más o menos espacio alrededor del texto.<\/p> La propiedad margin es la capa más externa de un elemento web. En otras palabras, crea un espacio alrededor del elemento. La propiedad consta de margin-top:<\/strong>, margin-right:<\/strong>, margin-bottom: <\/strong>y margin-left:<\/strong>.<\/p> Al igual que el padding, el margin puede establecerse en valores de longitud, porcentaje y heredado. Sin embargo, también admite:<\/p> El código de margin estándar es:<\/p> En CSS, el margin también tiene una propiedad abreviada: margin:<\/strong>. Se determina por el número de valores también:<\/p> Recuerda que debes escribir los valores en orden desde la parte superior y luego moverse en el sentido de las agujas del reloj hacia la izquierda. <\/p> Para autoajustar el margen, simplemente escribe el código:<\/p> Esto centrará horizontalmente el elemento dentro de su contenedor. En otras palabras, el elemento ocupará el ancho especificado y el espacio restante se dividirá a partes iguales entre el margen izquierdo y el derecho.<\/p> Utiliza un margen cuando quieras mover elementos hacia arriba, abajo, izquierda, derecha o centrarlos. La distancia entre elementos también es obra de los márgenes. Aparte de eso, los márgenes también se pueden utilizar para superponer elementos.<\/p> Por ejemplo, con el elemento imagen, puede utilizar un margen para colocar otra imagen encima. También puede establecer una distancia específica entre la imagen y un cuadro de texto.<\/p> El padding es una propiedad CSS que funciona sólo en elementos que tienen borders (bordes). Crea el espacio entre el borde y el contenido de un elemento. Por lo tanto, ten en cuenta que el relleno no tiene efecto en los elementos que no tienen bordes. <\/p> Los margenes forman el espacio fuera de los bordes de los elementos. A diferencia del relleno, los márgenes pueden afectar a un elemento tenga o no bordes<\/p> Otra diferencia es que el color de fondo del relleno y de los bordes se puede personalizar, mientras que los márgenes son transparentes. Con ellos se mostrará el color de fondo del tema del sitio web.<\/p> Cada página web está formada por bloques de contenido rectangulares. Estos están dispuestos encima, debajo y al lado unos de otros. Estos bloques son lo que llamamos elementos HTML<\/a>.<\/p> El modelo de caja CSS es básicamente un contenedor o caja que envuelve cada elemento HTML. Se compone de: <\/p> A continuación se muestra el código de un modelo de caja CSS estándar con su vista previa:<\/p> El siguiente tutorial te mostrará cómo añadir padding a un elemento encabezado en una entrada de WordPress.<\/p> Sigue los siguientes pasos para añadir márgenes a un elemento de imagen en una entrada de WordPress. <\/p> Diferentes elementos de contenido pueden funcionar mejor con padding o margin. Así que tenlo en cuenta a la hora de elegir entre ambos. Aquí tienes otros consejos que pueden resultarte útiles:<\/p> Si editar manualmente el diseño de un sitio web utilizando CSS es demasiado complicado para ti, prueba un constructor de páginas<\/a>. No requiere codificación y ofrece una fácil personalización, ahorrando mucho tiempo.<\/p> Además, el diseño que crees será automáticamente responsivo. No tendrás que preocuparte de tomar decisiones de diseño difíciles en cuanto a márgenes y relleno. El sitio web se ajustará a la perfección en varios tamaños de pantalla. <\/p> En CSS, tanto el padding como el margin añaden espacio a los elementos de la web, pero cada uno aporta resultados diferentes. El padding es el espacio entre el contenido de un elemento y el borde.<\/p> Por otra parte, el margin constituye el espacio más externo del elemento.<\/p> Para los principiantes, puede ser un poco confuso decidir qué propiedad aplicar al diseñar tu sitio web. Sin embargo, te irás familiarizando con ellas a medida que vayas jugando y experimentando. <\/p> Esperamos que los consejos mencionados en este artículo te hayan ayudado a entender sus diferencias y cuándo utilizar el relleno o el margen. <\/p>\n","protected":false},"excerpt":{"rendered":" Al editar un sitio web con CSS, las propiedades más utilizadas para espaciar los elementos de una página son el padding (relleno) vs el margin (margen). Para principiantes, estos términos pueden parecer confusos. Además, si se aplican de forma incorrecta, pueden dar lugar a un diseño web desordenado. La principal diferencia entre el padding y […]<\/p>\nPadding<\/h3>
\n
div {\n padding-top: 30px;\n padding-right: 50px;\n padding-bottom: 30px;\n padding-left: 50px;\n}<\/pre>\n
padding: 30px 50px 30px 50px;<\/pre>
\n
padding: 30px 50px 30px;<\/pre>
\n
padding: 30px 50px;<\/pre>
\n
padding: 30px;<\/pre>
div {\n width: 250px;\n padding: 25px;\n} <\/pre>![\"Ejemplo](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-160.png\")
<\/figure>![\"Ejemplo](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-161.png\")
<\/figure>Margin<\/h3>
\n
div {\n margin-top: 100px;\n margin-right: 25px;\n margin-bottom: 100px;\n margin-left: 25px;\n}<\/pre>![\"Ejemplo](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-162-667x1024.png\")
<\/figure><\/div>\n
margin: 100px 25px 100px 25px;<\/pre>
\n
margin: 100px 25px 100px;<\/pre>
\n
margin: 100px 25px;<\/pre>
\n
margin: -30px;<\/pre>
div {\n width: 250px;\n margin: auto;\n}<\/pre>Padding CSS vs Margin vs Border: ¿Cuál es la diferencia?<\/h2>
El modelo de caja CSS<\/h2>
![\"Modelo](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-163.png\")
<\/figure><\/div>\n
{\n width: 250px;\n height: 100px; \n margin: auto;\n padding: 20px;\n background-color: cyan;\n border: 5px solid blue;\n}<\/pre>![\"Ejemplo](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-164.png\")
<\/figure><\/div>¿Cómo añadir padding en CSS?<\/h2>
\n
![\"Panel](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-165.png\")
<\/figure>\n
![\"Sección](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-166.png\")
<\/figure>\n
h1 {\nbackground-color: beige;\npadding: 20px 100px;\n}<\/pre>![\"Sección](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-167-1024x385.png\")
<\/figure>\n
¿Cómo añadir margin en CSS?<\/h2>
\n
![\"Sección](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-168.png\")
<\/figure>\n
img {\nmargin: -20px 5px;\n}<\/pre>![\"Sección](\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2022\/09\/image-169.png\")
<\/figure>\n
Consejos para utilizar padding y margin<\/h2>
\n
![\"\"](\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\")
<\/a><\/figure>Conclusión<\/h2>