9. 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.
9.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;
}
9.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;
}
9.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;
}
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;}
Comprueba tu apendizaje