Box-sizing nas CSS3 - Exemplos

Front-end

05/08/2016

E aí, pessoal.

Nesse artigo que publiquei recentemente ensino a utilizar o recurso de box-sizing das CSS3, que facilitam o dimensionamento de elementos que precisam de padding e border: CSS3: Box-sizing.

Vocês costumam usar em seus projetos? Têm algum exemplo de uso que queiram compartilhar? Abrí esse tópico para reunirmos exemplos para enriquecer a comunidade.
Joel Rodrigues

Joel Rodrigues

Curtidas 12

Melhor post

Joel Rodrigues

Joel Rodrigues

05/08/2016

Esse recurso pode ser legal, por exemplo, para encaixar vários blocos dentro de um container sem exceder os limites. Por exemplo:

<div class="container">
  <div class="elemento"></div>
  <div class="elemento"></div>
  <div class="elemento"></div>
</div>


Com o box-sizing nos elementos os três ficam encaixados no container, mas sem essa propriedade só cabem dois:
.container {
  border:1px solid red;
  width: 300px;
  height:100px;
}

.elemento {
  width: 100px;
  height:100px;
  border:2px solid blue;
  box-sizing: border-box;
  float:left
}


Se quiserem testar online esse exemplo, o link é esse: https://jsfiddle.net/Lqb57p2z/1/.
GOSTEI 20

Mais Respostas

Marcus Santos

Marcus Santos

05/08/2016

Olá Joel,

Não conhecia esse recurso, começarei a utilizar com mais frequência em meus projetos.

Ele funciona bem em todos os navegadores mais recentes ?

Obrigado pela dica, com o exemplo fica bem fácil de entender.

Abs
GOSTEI 3
Joel Rodrigues

Joel Rodrigues

05/08/2016

Fala, Marcus. Tudo bem?
Esse recurso está disponível em todos os browsers modernos sim. Para ver as versões que suportam, você pode visitar esse link: Can I use box-sizing?.
Abraço.
GOSTEI 5
POSTAR