Modelo de bloco HTML

9.1 Elementos de bloco

Modelo de bloco HTML é um conceito que descreve a estrutura e exibição de elementos HTML num documento. Ele ajuda os desenvolvedores a entenderem como os elementos interagem entre si e como são dispostos na página. Compreender o modelo de bloco é importante para criar páginas web estruturadas e esteticamente atraentes.

O modelo de bloco HTML consiste em dois tipos principais de elementos: de bloco e em linha. Estes elementos desempenham um papel chave no layout das páginas web.

Elementos de bloco

Exemplo de elemento de bloco:

    
      <div>
        <h1>Título</h1>
        <p>Este é um parágrafo de texto dentro de um elemento de bloco div.</p>
      </div>
    
  

9.2 Elementos em linha

Elementos em linha (inline-level elements) ocupam apenas a largura necessária para seu conteúdo e não começam numa nova linha. Eles podem conter apenas elementos em linha ou texto. Exemplos de elementos em linha:

Exemplo de elemento em linha:

    
      <span>Este é um parágrafo com <strong>texto em negrito</strong> e <em>itálico</em>.</span>
    
  

9.3 Componentes do modelo de bloco

Cada elemento no modelo de bloco pode ser representado como um bloco retangular, consistindo das seguintes partes:

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

Visualização do modelo de bloco:

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

Exemplo de HTML com modelo de bloco:

Neste exemplo, o elemento <div> com a classe "box" possui uma largura de 200px, espaçamento interno de 10px, borda de 2px e espaçamento externo de 20px. Estas propriedades determinam como o elemento é exibido na página e interage com outros elementos.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        Este é um exemplo de modelo de bloco.
      </div>