Cuadro de estiloPropiedad de tamaño
Ejemplo
Cambie la propiedad boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
Definición y uso
La propiedad boxSizing le permite definir ciertos elementos para que se ajusten a un área de cierta manera.
Por ejemplo, si desea dos cuadros bordeados uno al lado del otro, puede lograrlo configurando boxSizing en "border-box". Esto obliga al navegador a representar el cuadro con el ancho y alto especificados, y colocar el borde y el relleno dentro del cuadro.
Compatibilidad con navegador
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
Sintaxis
Devuelve la propiedad boxSizing:
object.style.boxSizing
Establezca la propiedad boxSizing:
object.style.boxSizing = "content-box|border-box|initial|inherit"
Valores de propiedad
Value | Description |
---|---|
content-box | Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height |
border-box | The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detalles técnicos
Valor por defecto: | cuadro de contenido |
---|---|
Valor de retorno: | Una cadena, que representa la propiedad de tamaño de cuadro de un elemento |
Versión CSS | CSS3 |
páginas relacionadas
Referencia de CSS: propiedad de tamaño de cuadro
❮ Objeto de estilo