Cada elemento é representado como uma caixa retangular
Essa caixa possui propriedades de uma caixa em 2 dimensões (largura x altura)
width | height→ Tamanho (largura x altura).content→ Conteúdo.border→ Bordas.padding→ Preenchimento interno.margin→ Espaços fora da caixa.
Posso usar a ferramenta de desenvolvedor do próprio navegador para visualizar as especificações dos elementos da página.
HTML:
<div>
CSS é incrível!
</div>
Ao usar CSS no código acima:
Quando o padding é adicionado (padding: 0 20px;) faz com que aumente a largura da caixa, deixando de respeitar os100pxde largura:
E é por isso que é tão importante conhecer a propriedade dobox-sizing.
Por padrão o navegador vai calcular o tamanho da caixa pelocontent-boxe vai somar com os outros boxes, no exemplo acima no lugar de100pxa caixa vai ficar com uma largura de140px. Para que isso não aconteça, é possível mudar qual vai ser a
referência para o calculo do tamanho da caixa adicionando a propriedadebox-sizing: border-box;.
Dessa forma o elemento vai ficar com a largura (width) determinado, que no caso do exemplo citado é de100px.
Normalmente usa-se o código abaixo como forma de "resetar" o box-sizing que vem por padrão nos navegadores.
* {
box-sizing:border-box;
}
O seletor * seleciona todos os elementos da página.
display: block;vsdisplay: inline;
Como as caixas se comportam em relação as outras caixas.
Comportamento externo das caixas.
Ocupa toda a linha, colocando o próximo elemento abaixo desse:
width e height são respeitados.
padding, margin, border irão funcionar normalmente.
<p> <div> <section>, todos os headings<h1> <h2>...
Os elementos ficam ao lado do outro e não empurram outros elementos para baixo:
width e height não funcionam.
Somente valores horizontais de margin.
<a> <strong> <span> <em>
/* margin-top | margin-right | margin-bottom | margin-left */
values:<length>|<percentage>| auto
Geralmente usamos uma forma abreviada (shorthand) para escrever o margin. Esse formato segue o sentido horário iniciando pelo top, seguindo para right, bottom e left.
margin:12px 16px 10px 4px;/* TOP = 12px | RIGHT = 16px | BOTTOM = 10px | LEFT = 4px */
margin:12px 16px 0;/* TOP = 12px | RIGHT = 16px | BOTTOM = 0px | LEFT = 16px */
margin:8px 16px;/* TOP = 8px | RIGHT = 16px | BOTTOM = 8px | LEFT = 16px */
margin:8px;/* TOP = 8px | RIGHT = 8px | BOTTOM = 8px | LEFT = 8px */
O margin é aplicado em elementos com display block.
Cuidado com o margin collapsing. que é quando o top se junta ao bottom.
A propriedade padding pode ser escrita como nos formatos apresentados abaixo:
padding-top | padding-right | padding-bottom | padding-left
Geralmente usamos uma forma abreviada (shorthand) para escrever o padding. Esse formato segue o sentido horário iniciando pelo top, seguindo para right, bottom e left.
padding:12px 16px 10px 4px;/* TOP = 12px | RIGHT = 16px | BOTTOM = 10px | LEFT = 4px */
padding:12px 16px 0;/* TOP = 12px | RIGHT = 16px | BOTTOM = 0px | LEFT = 16px */
padding:8px 16px;/* TOP = 8px | RIGHT = 16px | BOTTOM = 8px | LEFT = 16px */
padding:8px;/* TOP = 8px | RIGHT = 8px | BOTTOM = 8px | LEFT = 8px */
O padding pode tervalores(values) decomprimento(px, em, rem) ou deporcentagem(%).
O padding poderá causar diferença na largura de um elemento.
obs.: Na aula sobre box-sizing aprendemos como resolver essa diferença na largura do elemento.
Box sizing | Link da aula
value:<border-style>|<border-width>|<border-color>
style:solid|dotted|dashed|double|groove|ridge|inset|outset
width:<length>
color:<color>
div {
/* shorthand */
border-top:/*top|right|bottom|left*/
/* style */
border:solid;
/* width<length>| style */
border:2px dotted;
/* style | color */
border:outset #f33;
/* width | style | color */
border:medium dashed green;}
O outline é muito semelhante ao border, mas difere em 4 sentidos:
→ Não modifica o tamanho da caixa, pois não é parte do Box Model.
→ Poderá ser diferente de retangular.
→ Não permite ajuste individuais.
→ Mais usado pelo user agent para acessibilidade.