Exemplo
Especificar que <div> elementos devem ter estofo e borda incluídas na largura total do elemento e height:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade de dimensionamento de caixa é usado para dizer ao navegador que as propriedades de dimensionamento (width and height) deve incluir.
Eles devem incluir border-box? Ou apenas o conteúdo da caixa (que é o valor padrão das propriedades largura e altura)?
| Valor padrão: | content-box |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.boxSizing="border-box" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8 | 29,0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSS Syntax
box-sizing: content-box|border-box|initial|inherit;Valores de propriedade
| Valor | Descrição |
|---|---|
| content-box | Padrão. As propriedades largura e altura (and min/max properties) inclui apenas o conteúdo. Border, estofamento, ou margem não estão incluídos |
| border-box | As propriedades largura e altura (and min/max properties) inclui conteúdo, preenchimento e de fronteira, mas não a margem |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Especifique dois lado limitado caixas a lado:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Tente você mesmo " Páginas relacionadas
Tutorial CSS3: CSS3 Box Dimensionamento
HTML DOM de referência: boxSizing property