Atributo box-sizing CSS

Definição e uso

A propriedade box-sizing permite que você defina de maneira específica um elemento que se encaixa em uma área específica.

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

Veja também:

Tutorial de CSS3:Interface do usuário CSS3

Manual de referência do HTML DOM:Propriedade boxSizing

Exemplo

Define dois caixas alinhados lado a lado com bordas:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Experimente você mesmo

Mais exemplos no final da página.

Sintaxe do CSS

box-sizing: content-box|border-box|inherit;

Valor do atributo

Valor Descrição
content-box

Este é o comportamento de largura e altura definido pelo CSS2.1.

A largura e altura são aplicadas separadamente ao content box do elemento.

Desenha o preenchimento e a borda do elemento além da largura e altura.
border-box

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

Isso significa que qualquer preenchimento e borda especificados para o elemento serão desenhados dentro da largura e altura já definidas.

Para obter a largura e altura do conteúdo, é necessário subtrair a largura e altura dos bordas e do preenchimento dos elementos já definidos.
inherit Define que a propriedade box-sizing deve ser herdada do valor do elemento pai.

Detalhes técnicos

Valor padrão: content-box
Herança: não
Versão: CSS3
Sintaxe do JavaScript: object.style.boxSizing="border-box"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit- ou -moz- indicam a primeira versão com prefixo usada.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5