EL margin y el padding en blogger

  • noviembre 3, 2011

Las preguntas que involucran a padding y margin siguen siendo las m??s comunes porque hay una tendencia a suponer que son lo mismo y eso, en realidad no es cierto.

Si muestro este ejemplo, uno dir??a … es lo mismo porque parecen lo mismo. En ambos casos, en una etiqueta cualquiera, hay otra, un p??rrafo sencillo. El de la izquierda tiene establecido un margen, el de la derecha, un padding; en ambos casos, el valor es 20:
<p style="margin: 20px; padding: 0;">un ejemplo</p>

<p style="margin: 0; padding: 20px;">un ejemplo</p>
un ejemplo
un ejemplo


Para ver que no son lo mismo, a esas mismas etiquetas les agregaremos algo m??s, por ejemplo, un color de fondo:


un ejemplo
un ejemplo


Como se ve ahora, la diferencia es notable; lo mismo ocurrir??a si le pusiera un borde, etc.

La clave de todo, es entender que una etiqueta es un rect??ngulo que tiene un cierto tama??o. Ese tama??o, est?? dado por sus dimensiones si es que las hemos establecido con height y width o bien por su contenido; es decir una etiqueta es un rect??ngulo que tiene un tama??o igual a su contenido, sea este una imagen o un texto.

Con margin, separamos ese rect??ngulo de aquellos otros rect??ngulos que lo contienen o que son adyacentes pero, el rect??ngulo en si mismo no var??a, sigue midiendo lo mismo.

Por el contrario, padding aumenta el tama??o de ese rect??ngulo, crea espacios alrededor de este y por eso, cuando le ponemos un fondo en el ejemplo de la derecha, ese color abarca un rect??ngulo mayor.

margin es un valor hacia afuera y padding es un valor hacia adentro

Esa es la raz??n por la que podemos usar m??rgenes negativos para desplazar algo hacia arriba o hacia la izquierda pero, no podemos usar paddings negativos.


En todos los navegadores, esto se ver?? como un rectangulo de 500 pixeles de ancho:
<div style="background-color:#FFF;margin:0 auto;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.


Y si le agrego un borde de 10 pixeles, el rect??ngulo ser?? mayor y medir?? 520 pixeles de ancho:
<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.


Y si le agrego un padding de 20 pixeles, el rect??ngulo ser?? aun mayor y medir?? 560 pixeles:
<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;padding:20px;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.


La regla de oro es esta:


ancho = border-left + padding-left + width + padding-right + border-right
alto = border-top + padding-top + height + padding-botom + border-botom


Pero el oro es uno de esos materiales impredescibles y esa regla es … relativa ya que hay otra propiedad que la modifica de manera sustancial y es una regla que funciona en cualquier navegador moderno, incluyendo Internet Explorer 8.

Sabemos que las propiedades CSS tienen siempre un valor por defecto as?? que si no las colocamos, los navegadores usan esas definiciones. La gran mayor??a de ellas, sobre todo las m??s sofisticadas, no influyen en nada, son siempre valores nulos o no nos damos cuenta de su existencia. Este es el caso de la propiedad box-sizing que tiene tres formas de sintaxis:

-moz-box-sizing: valor; en Firefox
-webkit-box-sizing: valor; en Chrome y Safari
box-sizing: valor; en IE 8 y Opera

El valor por defecto es una palabra: content-box que indica que el ancho y alto de algo no incluye bordes, paddings ni m??rgenes, s??lo su contenido. Pero admite otro valor: border-box que establece que el ancho y alto incluyen al borde y al padding.

Dijimos que si esto mide 500 y le ponemos un borde de 10 pixeles, el rect??ngulo ser?? de 520 pixeles:


Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.


Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.


As?? que ahora le agregaremos la propiedad box-sizing con el valor border-box y el rect??ngulo tendr?? los 500 pixeles que indica width; el borde ser?? «interior»:


Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.


Este detalle es particularmente ??til cuando lo que hacemos es utilizar medidas como porcentajes ya que estos porcentajes no incluyen los bordes.
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="margin:0 auto; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.


F??jense qu?? pasa si le agrego un borde:
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; margin:0 auto; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.


Peor a??n si le agrego un padding:
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; margin:0 auto; padding: 10px; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.


Todo se soluciona si establezco la propiedad box-sizing con el valor border-box:
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; box-sizing: border-box; margin:0 auto; padding: 10px; width:100%;">
....... el contenido .......
</div>
</div>
Class aptentClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo. taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.

No Comments Found