Skip to content

Modelo de Caixa.md

Latest commit

 

History

History
100 lines (72 loc) · 3.08 KB

Modelo de Caixa.md

File metadata and controls

100 lines (72 loc) · 3.08 KB

Modelo de Caixa (Box Model) em CSS

O Modelo de Caixa (Box Model) é um conceito fundamental no CSS que descreve como os elementos HTML são renderizados e ocupam espaço na página. Ele consiste em quatro partes principais: conteúdo, preenchimento, borda e margem.

Componentes do Modelo de Caixa

1. Conteúdo (Content)

  • O conteúdo do elemento, como texto, imagens ou outros elementos HTML.
  • Controlado por propriedades como width e height.

2. Preenchimento (Padding)

  • Espaço entre o conteúdo e a borda.
  • Controlado por propriedades como padding-top, padding-right, padding-bottom e padding-left.

3. Borda (Border)

  • Linha que circunda o elemento.
  • Controlada por propriedades como border-width, border-style e border-color.

4. Margem (Margin)

  • Espaço externo ao redor do elemento.
  • Controlado por propriedades como margin-top, margin-right, margin-bottom e margin-left.

Box Model Padrão

O Box Model padrão tem a seguinte representação:

+-------------------+
|      Margin       |
|                   |
|  +-------------+  |
|  |   Border    |  |
|  |             |  |
|  |   Padding   |  |
|  |             |  |
|  |   Content   |  |
|  |             |  |
|  |   Padding   |  |
|  |             |  |
|  |   Border    |  |
|  +-------------+  |
|                   |
|      Margin       |
+-------------------+

Calculando o Tamanho Total

Para calcular o tamanho total de um elemento, some o conteúdo, o preenchimento, a borda e a margem:

Tamanho Total = Conteúdo + Preenchimento + Borda + Margem

Por exemplo, se um elemento tiver uma largura de conteúdo de 200px, preenchimento de 20px, borda de 2px e margem de 10px, o tamanho total será:

Tamanho Total = 200px (Conteúdo) + 20px (Preenchimento) + 2px (Borda) + 10px (Margem) = 232px

Box Sizing

O comportamento padrão do CSS é calcular o tamanho total do width e height considerando apenas o conteúdo (box-sizing: content-box). Para incluir a borda e o padding no tamanho total usa-se box-sizing: border-box:

.elemento {
    box-sizing: border-box;
}

Isso é útil para manter o tamanho total consistente, mesmo quando a borda e o preenchimento são alterados.

Propriedades Relacionadas

  • width: Define a largura do conteúdo.
  • height: Define a altura do conteúdo.
  • padding: Define o preenchimento em todas as direções.
  • border: Define a largura, estilo e cor da borda.
  • margin: Define a margem em todas as direções.

Exemplo de Uso

.div-exemplo {
    width: 200px;
    height: 150px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    box-sizing: border-box;
}

Neste exemplo, a div-exemplo terá uma largura total de 200px (conteúdo + preenchimento + borda) e uma margem de 10px ao seu redor.

O Modelo de Caixa é fundamental para o design de layout em CSS e é importante entender como ele afeta o espaço e a aparência dos elementos em uma página da web. Use propriedades como width, height, padding, border e margin para controlar o Box Model de seus elementos e criar layouts precisos.