1. Concepto de margen y relleno CSS.
Diferencias entre margin y padding
CSS (box model). Ejemplos
(CU01028D)

2. MARGEN Y RELLENO
• Para avanzar en la comprensión del
funcionamiento de CSS debemos
conocer, saber utilizar y diferenciar dos
propiedades importantes: margin y padding. Al
igual que con los bordes, tendremos distintas
propiedades derivadas de las principales y
también tendremos shortand notations o
notaciones abreviadas para poder expresarlas.

3. • Empezaremos realizando una definición de conceptos:
• a) Contenido de un elemento HTML es aquello que se pretende mostrar al
visualizar ese elemento: puede ser un texto, una imagen o quizás otros
elementos como un objeto reproductor de sonido ó un mapa. El contenido
en CSS tiene forma de caja rectangular.
• b) Borde: es el perímetro que engloba el contenido y el posible relleno (en
inglés padding) entre el borde y el contenido.
• c) Relleno (padding): es el espacio transparente que se puede
dejar, opcionalmente, entre el contenido y el borde del elemento. El relleno
no tiene color (pero permite ver el color de fondo).
• d) Margen: es el espacio transparente que se puede
dejar, opcionalmente, entre el borde del elemento y el borde de otras cajas
adyacentes. El margen no tiene color (pero permite ver el color de fondo).
• Viendo esquemas gráficos y código se comprenderán con más facilidad
estos conceptos:

5. • Un elemento HTML puede tener margin y
padding, sólo tener margin, sólo tener
padding, o no tener ni margin ni padding. En
caso de no tener margin ni padding el elemento
aparecerá “ajustado” exactamente a su caja
contenedora.

7. • /* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {background-color: yellow; width: 60%;}
h1{margin: 25px; padding: 45px; border: solid
6px blue; }
h2{border-style: solid; border-color:red;
margin: 0; padding:0;}
div {border: solid thick black;}
div div {border: solid medium purple;}
div div div {border: dashed medium grey;}
img {border: solid #FF00FF 2px;}

8. • Relleno - Borra un área alrededor del
contenido. El relleno se ve afectado por el
color de fondo de la caja
• Contenido - El contenido de la caja, en la que
aparecen el texto y las imágenes

9. • La propiedad border-width se usa para ajustar
el ancho de la frontera.
• El ancho se establece en píxeles, o mediante el
uso de uno de los tres valores predefinidos:
fino, medio o grueso.
• Nota: La propiedad "border-width" no
funciona si se utiliza solo. Utilice la propiedad
"border-style" para establecer las fronteras
primero.

10. • Ejemplo
• p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

11. Ancho del borde
• La propiedad border-width se usa para ajustar el
ancho de la frontera.
• El ancho se establece en píxeles, o mediante el
uso de uno de los tres valores predefinidos:
fino, medio o grueso.
• Nota: La propiedad "border-width" no funciona si
se utiliza solo. Utilice la propiedad "border-style"
para establecer las fronteras primero.

12. • p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

13. Color del borde
• La propiedad border-color se utiliza para establecer el
color del borde. El color se puede ajustar por:
• Nombre - indique el nombre del color, como "rojo"
• RGB - especificar un valor RGB, como "rgb (255,0,0)"
• Hex - especificar un valor hexadecimal, como "#
ff0000"
• También puede establecer el color del borde de
"transparente".
• Nota: La propiedad "border-color" no funciona si se
utiliza solo. Utilice la propiedad "border-style" para
establecer las fronteras primero.

14. • Ejemplo
• p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

15. Frontera - Individual lados
• En CSS, es posible especificar diferentes fronteras
para diferentes lados:
• Ejemplo
• p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

16. Referencias
• http://www.w3schools.com/css/css_border.asp
• http://www.aprenderaprogramar.com/index.php
?option=com_content&view=article&id=732:con
cepto-de-margen-y-relleno-css-diferencias-entre-
margin-y-padding-css-box-model-ejemplos-cu010
28d&catid=75:tutorial-basico-programador-web-
css-desde-cero&Itemid=203