Box Model no CSS
Olá pessoal, tudo tranquilo com vocês?
Bora conversar um pouco sobre o Box-model???
Primeiramente, o que é o box-model e como ele pode me ajudar a estilizar melhor??
A maioria das tags HTML são compostas por todos os níveis do box-model, como demonstrado na imagem acima, com exceção do span, que só possui o content.
Então, entendendo esses níveis do box-model, podemos associar onde será a alteração que precisaremos fazer, ou seja, se precisamos alterar o espaço dentro do componente utilizamos a propriedade padding para preencher o espaço entre o content (o conteúdo de fato) e o border (a borda).
Sendo mais específica, os níveis do box model são:
- Margem (
margin) — é a camada mais externa do box-model, utilizada para separar um box-model de outro box-model. - Borda (
border) — é a camada que delimita o conteúdo e seu preenchimento para a zona externa. - Preenchimento (
padding) — como o próprio nome já sugere, ele preenche o espaço entre o conteúdo e a borda. - Conteúdo (
content) — é o conteúdo dentro do box-model, ou melhor, o conteúdo entre atag.
Beleza, mas como e o que alterar de cada nível desse box?
A margem, a borda e o preenchimento seguem basicamente a mesma sintaxe, como representado a foto abaixo:
No primeiro exemplo, podemos alterar, sempre no sentido anti-horário, a dimensão de cada lado. O valor, para cada lado, pode ser em pixel (px), porcentagem (%) ou outras unidades de medidas como em, rem. Para mais contexto sobre as unidades medidas em css, acesse o link.
Sobre o conteúdo, podemos alterar a sua altura (height) e sua largura (width).
E com isso, podemos entender melhor como funciona o box-model e como alterar os seus níveis.
That’s all!! Good day!!!
