Modelo de cuadro CSS
- Página anterior Altura / anchura CSS
- Página siguiente Contorno de CSS
Modelo de cuadro CSS
Todos los elementos HTML pueden considerarse como cuadrados. En CSS, al hablar de diseño y disposición, se utiliza el término "modelo de cuadro" o "modelo de caja".
El modelo de cuadro de CSS es esencialmente una caja que rodea cada elemento HTML. Incluye: margen, borde, relleno y contenido real. La imagen siguiente muestra el modelo de cuadro:
Descripción de diferentes partes:
- Contenido - El contenido del cuadro, donde se muestra el texto e imágenes.
- Relleno - Eliminar el área alrededor del contenido. El relleno es transparente.
- Borde - Rodear el borde del relleno y el contenido.
- Margen - Eliminar el área fuera de los límites. El margen es transparente.
El modelo de cuadro permite agregar bordes alrededor de los elementos y definir el espacio entre ellos.
La parte más interna del cuadro del elemento es el contenido real, rodeado directamente por el relleno. El relleno presenta el fondo del elemento. El borde está en el borde del relleno. Fuera del borde está el margen, que por defecto es transparente y no obstruye a ningún elemento posterior.
Consejo:El fondo se aplica a la región compuesta por el contenido y el relleno, el borde.
El relleno, el borde y el margen son opcionales, el valor predeterminado es cero. Sin embargo, muchos elementos se definen por la hoja de estilos del agente de usuario. Se puede sobrescribir estos estilos del navegador estableciendo el margen y el relleno del elemento en cero. Esto se puede hacer por separado o utilizando un selector universal para configurar todos los elementos:
* {
margen: 0;
relleno: 0;
}
En CSS, width y height se refieren al ancho y la altura del área de contenido. El aumento del relleno, el borde y el margen no afecta el tamaño del área de contenido, pero aumenta el tamaño total del cuadro del elemento.
Supongamos que cada borde del cuadro tiene 10 píxeles de margen exterior y 5 píxeles de relleno interior. Si se desea que este cuadro de elemento alcance 100 píxeles, se debe establecer el ancho del contenido en 70 píxeles, véase la imagen siguiente:
#box {
ancho: 70px;
margen: 10px;
relleno: 5px;
}
Consejo:El relleno, el borde y el margen se pueden aplicar a todos los lados de un elemento o a un lado específico.
Consejo:El margen puede ser negativo y, en muchos casos, se debe usar un margen negativo.
Ejemplo
Demostrar el modelo de cuadro:
div {
ancho: 300px;
borde: 15px sólido verde;
relleno: 50px;
margen: 20px;
}
Ancho y altura del elemento
Para configurar correctamente el ancho y la altura del elemento en todos los navegadores, es necesario entender cómo funciona el modelo de cuadro.
Consejo importante:Al establecer las propiedades width y height de un elemento con CSS, solo es necesario establecer el ancho y la altura del área de contenido. Para calcular el tamaño completo del elemento, también es necesario sumar el relleno, el borde y el margen.
Ejemplo
<div> El ancho total del elemento será de 350px:
div {
anchura: 320px;
rejilla: 10px;
borde: 5px sólido gris;
margen: 0;
}
Cálculo como se muestra a continuación:
320px (anchura) + 20px (margen interno izquierdo + derecho) + 10px (borde izquierdo + derecho) + 0px (margen externo izquierdo + derecho) = 350px
La anchura total del elemento debe calcularse de la siguiente manera:
Anchura total del elemento = anchura + margen izquierdo interno + margen derecho interno + borde izquierdo + borde derecho + margen izquierdo externo + margen derecho externo
La altura total del elemento debe calcularse de la siguiente manera:
Altura total del elemento = altura + margen superior interno + margen inferior interno + borde superior + borde inferior + margen superior externo + margen inferior externo
- Página anterior Altura / anchura CSS
- Página siguiente Contorno de CSS
