box-sizing
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.
Sintaxe
Sintaxe formal:box-sizing =
content-box |
border-box
box-sizing: content-box box-sizing: border-box box-sizing: inherit
Valores
content-box
-
Essa é o estilo padrão, conforme especificado pela norma CSS. As propriedades
width
(largura) eheight
(altura) são medidas incluindo só o conteúdo, mas não o padding, border ou margin. Nota: Padding, border e margin serão fora da box. Exemplo.: Se .box {width: 350px} então se você aplicar uma propriedade {border: 10px solid black;} o resultado renderizado no navegador (browser) será .box {width: 370px;} padding-box
Experimental-
As propriedades de largura (
width
) e de altura (height
) incluem o tamanho padding size, mas não incluem a propriedade border ou margem. border-box
-
As propriedades de largura (
width
) e de altura (height
) incluem o tamanho padding size e a propriedade border, mas não incluem a propriedade margin.
Exemplos
/* funciona em Firefox, WebKit, Opera and IE8+ */
/* exemplo de uso no navegador Firefox */
.exemplo {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Especificações
Specification |
---|
CSS Box Sizing Module Level 3 # box-sizing |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- CSS box model [Eng]