Propriedade de dimensionamento da caixa de estilo
Exemplo
Altere a propriedade boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
Definição e uso
A propriedade boxSizing permite definir certos elementos para se ajustarem a uma área de uma determinada maneira.
Por exemplo, se você quiser duas caixas com bordas lado a lado, isso pode ser feito configurando boxSizing para "border-box". Isso força o navegador a renderizar a caixa com a largura e a altura especificadas e colocar a borda e o preenchimento dentro da caixa.
Suporte ao navegador
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
Sintaxe
Retorne a propriedade boxSizing:
object.style.boxSizing
Defina a propriedade boxSizing:
object.style.boxSizing = "content-box|border-box|initial|inherit"
Valores de propriedade
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 |
Detalhes técnicos
Valor padrão: | caixa de conteúdo |
---|---|
Valor de retorno: | Uma String, representando a propriedade de dimensionamento de caixa de um elemento |
Versão CSS | CSS3 |
Páginas relacionadas
Referência CSS: propriedade de dimensionamento de caixa
❮ Objeto de estilo