Propiedad de tamaño de caja CSS
Ejemplo
Incluya relleno y borde en el ancho y alto total del elemento:
#example1 {
box-sizing: border-box;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La box-sizing
propiedad define cómo se calculan el ancho y el alto de un elemento: si deben incluir relleno y bordes, o no.
Valor por defecto: | cuadro de contenido |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.boxSizing="border-box" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- o -moz- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Sintaxis CSS
box-sizing: content-box|border-box|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Especifique dos cuadros bordeados uno al lado del otro:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Ejemplo
Establezca el "tamaño de caja universal":
* {
box-sizing: border-box;
}
páginas relacionadas
Tutorial de CSS: Tamaño de caja CSS
Referencia HTML DOM: propiedad boxSizing