Ejemplo
Cambie la propiedad boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
Inténtalo tú mismo " Definición y Uso
La propiedad boxSizing le permite definir ciertos elementos para adaptarse a un área de una manera determinada.
Por ejemplo, si quieres dos cajas bordeado lado a lado, se puede lograr mediante el establecimiento de boxSizing a "border-box" . Esto obliga a que el navegador muestre la caja con la anchura y la altura especificada, y el lugar de la frontera y el relleno dentro de la caja.
Soporte del navegador
La propiedad boxSizing es compatible en Internet Explorer, Opera, Chrome y Safari.
Firefox soporta una alternativa, la propiedad MozBoxSizing.
Sintaxis
Devolver la propiedad boxSizing:
object .style.boxSizing Establecer la propiedad boxSizing:
object .style.boxSizing="content-box|border-box|initial|inherit"
Valores de propiedad
| Valor | Descripción |
|---|---|
| content-box | Valor por defecto. Este es el comportamiento de la anchura y la altura como se especifica por CSS2.1. La anchura especificada y la altura (and min/max properties) se aplican a la anchura y la altura, respectivamente, de la caja de contenido del elemento. El relleno y el borde del elemento se disponen y se estiran fuera de la anchura y altura especificadas |
| border-box | La anchura especificada y la altura (and min/max properties) en este elemento determinan el cuadro de borde del elemento. Es decir, cualquier relleno o borde especificado en el elemento se presenta y se estiran dentro de esta anchura y altura especificadas. El ancho del contenido y la altura se calculan restando los anchos de borde y de relleno de los lados respectivos de la 'anchura' especificada y las propiedades de 'altura' |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lea acerca de heredar |
Detalles técnicos
| Valor por defecto: | Contenido de la caja |
|---|---|
| Valor de retorno: | Una cadena, que representa la propiedad de cuadro de dimensionamiento de un elemento |
| Versión CSS | CSS3 |
Páginas relacionadas
Referencia CSS: box-sizing property
<Estilo de objeto