Propriedade Style boxSizing

definição e uso

boxSizing a propriedade permite que você defina de maneira específica um elemento específico para um determinado área.

Por exemplo, se você precisar alinhar dois caixas com borda lado a lado, você pode definir box-sizing como "border-box". Isso fará com que o navegador mostre uma caixa com largura e altura especificadas, incluindo o border e padding dentro da caixa.

Veja também:

Manual de CSS:box-sizing propriedade

exemplo

alterar a propriedade boxSizing:

document.getElementById("myDIV").style.boxSizing = "border-box";

Experimente você mesmo

sintaxe

retornar a propriedade boxSizing:

objeto.style.boxSizing

definir a propriedade boxSizing:

objeto.style.boxSizing = "content-box|border-box|initial|inherit"

valor da propriedade

valor descrição
content-box

valor padrão. Isso é o comportamento do largura e altura definido pelo CSS2.1.

O largura e altura definidos (e min/max propriedades) são aplicados ao largura e altura da caixa de conteúdo do elemento.

o layout e desenho do padding e border do elemento são feitos fora do largura e altura definidos
border-box

A largura e altura definidas para o elemento determinam a caixa de borda do elemento.

Isso significa que qualquer padding e border especificado para o elemento será desenhado dentro do largura e altura definidos.

o largura e altura do conteúdo podem ser obtidas subtraindo o border e padding do largura e altura definidos.
initial defina essa propriedade como seu valor padrão. Veja também initial。
inherit herda essa propriedade do elemento pai. Veja também inherit。

detalhes técnicos

valor padrão: content-box
retorno: string que representa o box-sizing propriedade。
Versão do CSS: CSS3

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte