Exemplo
Altere a propriedade boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
Tente você mesmo " Definição e Uso
A propriedade boxSizing permite definir certos elementos para caber uma área de uma determinada maneira.
Por exemplo, se você quiser dois lado fronteira caixas a lado, ele pode ser alcançado através da criação boxSizing para "border-box" . Isso força o navegador para renderizar a caixa com a largura e altura especificadas, e coloque a borda e preenchimento dentro da caixa.
Suporte navegador
A propriedade boxSizing é suportada no Internet Explorer, Opera, Chrome e Safari.
Firefox suporta uma alternativa, a propriedade MozBoxSizing.
Sintaxe
Devolver o imóvel boxSizing:
object .style.boxSizing Defina a propriedade boxSizing:
object .style.boxSizing="content-box|border-box|initial|inherit"
Valores de propriedade
| Valor | Descrição |
|---|---|
| content-box | Valor padrão. Este é o comportamento de largura e altura, tal como especificado por CSS2.1. A largura especificada e altura (and min/max properties) aplicam-se à largura e altura, respectivamente, da caixa de conteúdo do elemento. O enchimento e o limite do elemento são definidos e desenhada fora da largura e altura especificada |
| border-box | A largura especificada e altura (and min/max properties) sobre este elemento determinar a caixa fronteira do elemento. Isto é, qualquer acolchoamento ou borda especificada no elemento é apresentado e desenhada dentro desta largura e altura especificada. A largura e a altura são conteúdo calculado subtraindo-se as fronteiras e preenchimento larguras dos respectivos lados da 'largura' especificado e propriedades 'altura' |
| initial | Define essa propriedade para seu valor padrão. Leia sobre inicial |
| inherit | Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar |
Detalhes técnicos
| Valor padrão: | conteúdo de caixa |
|---|---|
| Valor de retorno: | A String, que representa a propriedade de dimensionamento de caixa de um elemento |
| CSS Versão | CSS3 |
Páginas relacionadas
Referência CSS: box-sizing property
<Estilo de objeto