Box-sizing nas CSS3 - Exemplos

05/08/2016

145

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.
Responder

Post mais votado

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/.
Responder

Mais Posts

07/08/2016

Marcus Santos

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
Responder

08/08/2016

Joel Rodrigues

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.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar