English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El modelo de cuadro CSS describe cómo disponer visualmente los elementos en la página web.
Cada elemento que se puede mostrar contiene uno o más cuadrados. El modelo de cuadro CSS describe generalmente cómo disponer estos cuadrados en la página web. Estos cuadrados pueden tener diferentes propiedades y pueden interactuar de diferentes maneras, pero cada cuadro tiene un área de contenido y margen, margen y borde opcionales.
La siguiente imagen muestra cómo las propiedades CSS de margen, relleno y borde determinan el espacio ocupable del elemento en la página web.
Generalmente, cuando usa CSS anchoyalturaAl establecer las propiedades de ancho y altura de un elemento, en realidad, solo está estableciendo el ancho y la altura del área de contenido del elemento. El ancho y la altura reales del cuadro de elemento dependen de varios factores.
El espacio real que puede ocupar el cuadro de elemento se calcula de la siguiente manera:
| Tamaño de la caja | Propiedad de CSS |
|---|---|
| ancho total | ancho+ relleno-izquierda+ relleno-derecha+ borde-izquierda+ borde-derecha+ margen-izquierda+margen-derecha |
| altura total | altura+ relleno-arriba+ relleno-abajo+ borde-arriba+ borde-abajo + margen-arriba+margen-abajo |
En los siguientes capítulos se dan los usos de diferentes propiedades.
Nota:En el modelo de cuadro de CSS; el área de contenido del cuadro de elemento es el área que muestra texto, imágenes, listas, tablas, formularios, videos y otros.