Modelo de cajas: márgenes, relleno y bordes

13. 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, border y padding.

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

13.1. Padding o relleno

Tabla 13.1: Padding

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;
   border: 1px solid black;
   background-color: darkseagreen;
 }

0

---

13.2. Margin

Tabla 13.2: Margin

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

---

13.3. Bordes

Tabla 13.3: Bordes

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

Comprueba tu aprendizaje