Dimensionamento de caixa - CSS-Tricks

Anonim

A box-sizingpropriedade em CSS controla como o modelo de caixa é tratado para o elemento ao qual se aplica.

.module ( box-sizing: border-box; )

Uma das maneiras mais comuns de usá-lo é aplicá-lo a todos os elementos da página, incluindo os pseudoelementos:

*, *::before, *::after ( box-sizing: border-box; )

Isso geralmente é chamado de “tamanho de caixa universal” e é uma boa maneira de trabalhar! O (literal) que widthvocê define é a largura que você obtém, sem ter que fazer cálculos mentais e gerenciar a complexidade que vem de larguras que vêm de várias propriedades. Temos até um dia de conscientização do tamanho da caixa por aqui.

Valores

  • content-box: o padrão. Os valores de largura e altura aplicam-se apenas ao conteúdo do elemento. O preenchimento e a borda são adicionados na parte externa da caixa.
  • padding-box: Os valores de largura e altura se aplicam ao conteúdo do elemento e seu preenchimento. A borda é adicionada do lado de fora da caixa. Atualmente, apenas o Firefox oferece suporte ao padding-boxvalor.
  • border-box: Os valores de largura e altura se aplicam ao conteúdo, preenchimento e borda.
  • inherit: herda o tamanho da caixa do elemento pai.

Exemplo

Esta imagem de exemplo compara o padrão content-box(superior) com border-box(inferior):

A linha vermelha entre as imagens representa o valor da largura dos elementos. Observe que o elemento com o padrão box-sizing: content-box;excede a largura declarada quando o preenchimento e a borda são adicionados fora da caixa de conteúdo, enquanto o elemento com box-sizing: border-box;aplicado se ajusta completamente à largura declarada.

Usando o dimensionamento da caixa

Digamos que você defina um elemento como width: 100px; padding: 20px; border: 5px solid black;. Por padrão, a caixa resultante tem 150px de largura. Isso ocorre porque o modelo de dimensionamento de caixa padrão é content-box, que aplica a largura declarada de um elemento apenas ao seu conteúdo, colocando o preenchimento e a borda fora da caixa do elemento. Isso aumenta efetivamente a quantidade de espaço que o elemento ocupa.

Se você alterar box-sizingpara padding-box, o preenchimento será colocado dentro da caixa do elemento. Então, a caixa teria 110 px de largura, com 20 px de preenchimento na parte interna e 10 px de borda na parte externa. Se quiser colocar o preenchimento e a borda dentro da caixa, você pode usar border-box. A caixa teria então 100 px de largura - 10 px de borda e 20 px de preenchimento são colocados dentro da caixa do elemento.

Demo

Veja a comparação de caneta de valores de tamanho de caixa por CSS-Tricks (@ css-tricks) em CodePen.

Relacionado

  • width
  • height
  • padding
  • border

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum *† 3 * † 1 ‡ 7 * 8 * 2,1 * † Nenhum *

* padding-boxnão suportado

† versões mais antigas exigem -webkitprefixo (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefixo necessário até a versão 28, sem prefixo a partir de 29.