Saltar al contenido

Margin VS Padding – Templates CSS

Parece que las propiedades margin y padding provocan alguna confusión. Si a eso le agregamos que su resultado es diferente según sea el navegador que se usa, el tema merece ser nuevamente tratado.
Estas son las propiedades:
margin: superior derecho inferior izquierdo
margin-top:  | margin-right:  | margin-bottom:  | margin-left:

Establece la cantidad de espacio entre un elemento y el elemento adyacente.
Puede ser una longitud (positiva o negativa) un porcentaje o auto.

padding: superior derecho inferior izquierdo
padding-top:  | padding-right:  | padding-bottom:  | padding-left:

Establecen la distancia entre los bordes de un elemento y el área que lo contiene.
No admite valores negativos.
Este diagrama ilustra las cuatro áreas de la «caja genérica de CSS»:

Hay cuatro áreas anidadas, el área del CONTENIDO es la que está en el interior y, hacia afuera, le siguen padding, border y margin.

Vamos a imaginar que hay un bloque dentro de otro bloque y, que en ambos, las propiedades margin y padding son 0px:

<div style="background-color:oldlace;height:100px; ... "> /* EXTERNO */
  <div style="background-color:tomato; ... "> /* INTERNO */
CONTENIDO  ...
  </div>
</div>

Aquí hay una herramienta simple donde puede probarse qué significa cada propiedad. Cambien los valores de margin y padding para cada uno de los bloques, opriman el botón correspondiente y vean cómo actua cada propiedad en el navegador que están usando.

Fuente: http://vagabundia.blogspot.com/2006/12/margin-vs-padding.html

Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/

Etiquetas: