Modelo de cajas: márgenes, relleno y bordes

12. Modelo de cajas: márgenes, relleno y bordes

Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades CSS. Las propiedades más importantes de las cajas o contenedores son las siguientes: margin (margen externo), border (borde) y padding (margen interno).

Las propiedades operan en el siguiente orden: superior, derecha, inferior e izquierda.

12.1. Padding o relleno

El padding es el margen interno de un elemento, también se le llama relleno y es la cantidad de espacio entre el borde y el contenido del elemento. Veamos una tabla con las propiedades para dar un margen interno a un elemento.

Propiedad	Descripción	Valores
padding-top padding-right padding-bottom padding-left	Tamaño del relleno superior, derecho, inferior e izquierdo	longitud | porcentaje
padding	Tamaño del relleno	longitud | porcentaje {1,4}

Valores del padding (también aplicables a la propiedad margin):

• Un valor: se aplica el estilo a los 4 lados.
• Dos valores: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda.
• Tres valores: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento.
• Cuatro valores: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda. 

Ejemplo Padding

div.a {
   padding-top: 30px;
   padding-bottom: 80px;
   padding-right: 50px;
   padding-left: 40px;
   border: 1px solid black;
   background-color: azure;
 }
 div.b { /* Propiedad corta */
   padding: 30px 50px 80px 40px; /*superior, derecha, inferior e izquierda*/
   border: 1px solid black;
   background-color: darkseagreen;
 }

0

---

12.2. Margin

El margin es el margen externo de un elemento, fuera de cualquier borde definido. Veamos las distintas propiedades para dar estilo a los márgenes de un elemento.

Propiedad	Descripción	Valores
margin-top margin-right margin-bottom margin-left	Tamaño del margen superior, derecho, inferior e izquierdo	longitud | porcentaje | auto
margin	Ancho de los márgenes	longitud | porcentaje | auto {1,4}

Ejemplo margin

div.a {
   margin-top: 30px;
   margin-bottom: 80px;
   margin-right: 50px;
   margin-left: 40px;
   border: 1px solid black;
   background-color: azure;
 }
 div.b { /* Propiedad corta */
   margin: 30px 80px 50px 40px;
   border: 1px solid black;
   background-color: darkseagreen;
 }

0

---

12.3. Bordes

La propiedad border en CSS permite especificar el estilo, el ancho y el color de los bordes de un elemento. Puedes usar diferentes valores para crear distintos tipos de bordes, como líneas lisas, de puntos, redondeados, etc. Veamos las propiedades para dar estilo a los bordes de un elemento.

Propiedad	Descripción	Valores
border-top-width border-right-width border-bottom-width border-left-width	Anchura del borde superior, derecho, inferior o izquierdo	thin | medium | thick | longitud
border-width	Anchura del borde (reducida)	thin | medium | thick | longitud {1,4}
border-top-color border-right-color border-bottom-color border-left-color	Color del borde superior, derecho, inferior e izquierdo	color | transparent
border-color	Color del borde (reducida)	color | transparent {1,4}
border-top-style border-right-style border-bottom-style border-left-style	Estilo del borde superior, derecho, inferior e izquierdo	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-style	Estilo del borde (reducida)	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}
border-top border-right border-bottom border-left	Ancho, estilo y color para el borde superior, derecho, inferior e izquierdo	border-top-width | border-top-style | border-top-color
border	Ancho, estilo y color para los bordes (reducida)	border-width | border-style | border-color
border-radius	Curvatura del borde	longitud | porcentaje {1,4}

**Las propiedades del borde no tendrán efecto hasta que se defina la propiedad border-style.

Ejemplo border

.a { border: 4px solid blue; }
.b { border: 6px dotted green; }
.c { border: 3px dashed purple; }
.d { 
     border-top: 3px double orange;
     border-right: 3px double brown;
     border-bottom: 3px double brown;
     border-left: 3px double brown;
 }

0

Ejemplo border-radius

.a { background-color: blue; border-radius: 20px 20px 0 0; height:100px; width: 100px;}
.b { background-color: green; border-radius: 0 0 40px 40px; height:100px; width: 100px;}
.c { background-color: purple; border-radius: 50px; height:100px; width: 100px;}

dark

Test