Introdução ao modelo em bloco

1.1 Fundamentos do modelo em bloco

O modelo em bloco é a base para entender como os elementos são posicionados e interagem entre si em uma página web. Ele define a estrutura e dimensões dos elementos HTML, bem como como eles são rodeados por espaçamentos internos, bordas e espaçamentos externos.

Fundamentos do modelo em bloco

O modelo em bloco CSS descreve a composição dos blocos de elementos HTML. Cada elemento é composto por quatro componentes principais:

• Conteúdo (content).
• Espaçamento interno (padding).
• Bordas (border).
• Espaçamento externo (margin).

Esses componentes definem como um elemento será exibido e como ele interagirá com outros elementos na página.

Conteúdo (Content)

O conteúdo (content) é a parte principal do elemento, onde está o texto, imagens ou outros elementos aninhados. As dimensões do conteúdo podem ser definidas explicitamente através das propriedades width e height, ou determinadas pelo conteúdo do elemento.

Exemplo de uso

Neste exemplo, o conteúdo do elemento .content inclui o texto "Este é o conteúdo do elemento.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Este é o conteúdo do elemento.
      </div>
    
  

1.2 Visualização do modelo em bloco

Cada elemento no modelo em bloco pode ser representado como um bloco retangular composto pelas seguintes partes:

• Conteúdo (Content): conteúdo interno do elemento, como texto ou imagem
• Espaçamento interno (Padding): espaço entre o conteúdo e a borda do elemento
• Borda (Border): linha que envolve o espaçamento interno e o conteúdo
• Espaçamento externo (Margin): espaço entre a borda do elemento e os elementos vizinhos

Visualização do modelo em bloco:

    
      .element {
        width: 200px;           /* Largura do conteúdo */
        padding: 10px;          /* Espaçamento interno */
        border: 2px solid red;  /* Borda */
        margin: 20px;           /* Espaçamento externo */
      }
    
  

1.3 Bordas (Border)

Bordas (border) envolvem o conteúdo e os espaçamentos internos do elemento. As bordas podem ter diferentes estilos, espessuras e cores. Elas podem ser usadas para destacar visualmente os elementos na página.

Exemplo de uso

Neste exemplo, o elemento .border tem uma borda de 5 pixels de espessura, listrada e preta, que envolve o conteúdo e os espaçamentos internos.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Este é um elemento com borda.
      </div>