HackMD
Cheatsheet Box-model
cores
nomes de cores (red, white), hexadecimais (#FFFFFF, #F0F0F0), RGB (rgb(255, 0, 0), rgb(255, 255, 255)) e outros.
referência: W3 Schools Unidades de cores
unidades de tamanho
px, em, rem, vh, e outros
referência: W3 Schools Unidades de tamanho/posição
Box model
ordem: conteúdo, padding, borda, margem
| Nome | Descrição | Valores |
|---|---|---|
padding |
Shorthand para as propriedades padding-top, padding-right, padding-bottom e padding-left |
unidades de tamanho (1 unidade para todos os lados, 2 unidades para top/bottom e left/right, 3 unidades para top, left/right e bottom e 4 unidades para top, right, bottom e left) |
margin |
Shorthand para as propriedades margin-top, margin-right, margin-bottom e margin-left |
unidades de tamanho (1 unidade para todos os lados, 2 unidades para top/bottom e left/right, 3 unidades para top, left/right e bottom e 4 unidades para top, right, bottom e left) |
border |
Shorthand para as propriedades border-width, border-style e border-color |
border-width border-style border-color |
border-width |
Diz a grossura da borda | unidades de tamanho |
border-style |
Diz o estilo da borda | dotted solid double dashed |
border-color |
Diz a cor da borda | cores |
border-radius |
Diz o quanto os cantos da borda devem ser arredondados | unidades de tamanho |
box-sizing |
Diz como calcular o tamanho para o conteudo do elemento | content-box: (width = conteudo + padding + border) ou border-box: (conteudo = width - (padding + border)) |
