3.1 KiB
| title | localeTitle |
|---|---|
| Box Model | Modelo de caixa |
Modelo de caixa
Entender o Modelo de Caixas de CSS é crucial para poder planejar corretamente uma página da web.
Quando um navegador renderiza (desenha) uma página da web, cada elemento, por exemplo, um pedaço de texto ou uma imagem, é desenhado como uma caixa retangular seguindo as regras do Modelo de Caixa do CSS.
No centro da caixa está o conteúdo em si, que ocupa uma certa altura e largura. Esta região é conhecida como a área de conteúdo . O tamanho da área de conteúdo pode ser determinado automaticamente ou você pode definir explicitamente o tamanho da altura e da largura. (veja a nota abaixo sobre o box-sizing )
Em torno da área de conteúdo, esta é uma região conhecida como área de preenchimento . O tamanho do preenchimento pode ser o mesmo ao redor (definido com padding ) ou você pode definir individualmente para os padding superior, direito, inferior e esquerdo (com padding-top , padding-right , padding-bottom e padding-left ) .
Em seguida, há uma área de fronteira . Isso cria uma borda ao redor do elemento e seu preenchimento. Você pode definir espessura ( border-width ), cor (cor da border-color ) e estilo ( border-style ) da borda. As opções de estilo incluem none (sem borda), solid , dashed , dotted e várias outras. Além disso, você pode definir as bordas nos 4 lados individualmente; por exemplo, a borda superior com border-top-width , border-top-color e border-top-style pela sua espessura, cor e estilo. (Veja a nota abaixo sobre box-sizing .)
Finalmente, há a área de margem . Isso cria um espaço livre ao redor do elemento, preenchimento e borda. Novamente, você pode definir individualmente as margens superior, direita, inferior e esquerda (com margin-top , margin-right , margin-bottom e margin-left ). Sob certas circunstâncias, o colapso da margem ocorre e as margens entre os elementos adjacentes podem ser compartilhadas.
Propriedade de box-sizing O padrão para essa propriedade é content-box . Se você usar o padrão, o modelo de caixa permitirá que o autor especifique o tamanho da área de conteúdo. No entanto, é possível usá-los para especificar o tamanho da área da borda. Isso é feito alterando box-sizing propriedade de box-sizing border-box . Isso às vezes pode tornar os layouts mais fáceis. Você pode definir a propriedade de box-sizing por elemento, conforme desejado.