El modelo de caja CSS
Todos los elementos HTML pueden ser considerados como cajas. En CSS, el término "modelo de caja" se usa cuando se habla de diseño y el diseño.
El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Se compone de: márgenes, bordes, el relleno y el contenido real.
La siguiente imagen ilustra el modelo de caja:
Explicación de las diferentes partes:
- Contenido - El contenido de la caja, donde aparecen textos e imágenes
- El relleno - Borra un área alrededor del contenido.El relleno es transparente
- Frontera - Un borde que va alrededor del relleno y contenido
- Margen - Borra una zona fuera de la frontera.El margen es transparente
El modelo de caja nos permite añadir un borde alrededor de los elementos, y para definir el espacio entre los elementos.
Ejemplo
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
} Inténtalo tú mismo " Anchura y la altura de un elemento
Con el fin de establecer la anchura y la altura de un elemento correctamente en todos los navegadores, lo que necesita saber cómo funciona el modelo de caja.
 | Importante: Al configurar las propiedades de anchura y altura de un elemento con CSS, que acaba de establecer la anchura y la altura del área de contenido.Para calcular el tamaño de un elemento, también debe agregar relleno, bordes y márgenes. |
|---|
Suponemos que queremos con el estilo de un <div> elemento a tener una anchura total de 350 píxeles:
Ejemplo
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
} Inténtalo tú mismo " Aquí está la matemática:
La anchura total de un elemento debe calcularse así:
anchura total del elemento = ancho + izquierda + acolchado relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho
La altura total de un elemento debe calcularse así:
Altura total = altura elemento + acolchado superior + inferior acolchado + borde superior + borde inferior + top + margen margen inferior
| Nota para el viejo IE: Internet Explorer 8 y versiones anteriores, incluyen el relleno y el borde de la width la propiedad. Para solucionar este problema, agregue un <!DOCTYPE html> de la página HTML. |
|---|
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»