Espaçamentos

2.1 Espaçamento Interno (Padding)

Espaçamentos internos (padding) determinam o espaço entre o conteúdo de um elemento e suas bordas. Você pode definir o padding para cada lado do elemento: topo, direita, baixo e esquerda. Espaçamentos internos podem ser úteis para criar espaço ao redor do conteúdo de um elemento, para que ele não fique encostado nas bordas.

Exemplo de Uso

Neste exemplo, ao elemento com a classe .padding foram aplicados espaçamentos internos de 20 pixels de todos os lados, criando assim espaço ao redor do conteúdo.

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

    
      <div class="padding">
        Este é um elemento com espaçamentos internos.
      </div>
    
  

2.2 Espaçamento Externo (Margin)

Espaçamentos externos (margin) determinam o espaço entre um elemento e os elementos vizinhos. Você pode definir margens para cada lado do elemento: topo, direita, baixo e esquerda. Espaçamentos externos são úteis para criar espaço entre elementos e evitar que se sobreponham.

Exemplo de Uso:

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

    
      <div class="margin">
        Este é um elemento com espaçamentos externos.
      </div>
    
  

2.3 Interação dos Componentes do Modelo de Caixa

Todos os quatro componentes do modelo de caixa (conteúdo, padding, bordas e margens) trabalham juntos para definir o tamanho total e a posição de um elemento na página.

Exemplo de interação dos componentes:

    
      .box {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px solid #000;
        margin: 30px;
        width: 200px;
      }
    
  

    
      <div class="box">
        Este é um elemento com margens e espaçamentos internos.
      </div>
    
  

Explicação do código:

• Conteúdo: texto dentro do elemento
• Espaçamentos Internos: 20 pixels, criando espaço entre o conteúdo e a borda
• Bordas: 5 pixels, que cercam o elemento
• Espaçamentos Externos: 30 pixels, criando espaço entre o elemento e outros elementos na página

2.4 Espaçamentos Externos Negativos

Margens podem ter valores negativos, o que leva à sobreposição de elementos.

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

    
      <div>
        Este é um elemento comum
      </div>
      <div class="negative-margin">
        Este é um elemento com margem superior negativa.
      </div>
    
  

2.5 Colapso de Margens

Quando as margens verticais de dois blocos adjacentes se encontram, elas podem se fundir, formando uma única margem, igual à maior delas.

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

      .box2 {
        background-color: #d0d0d0;
        padding: 20px;
        border: 2px solid #000;
        margin-top: 20px;
      }
    
  

    
      <div class="box1">
        Este é o primeiro elemento.
      </div>

      <div class="box2">
        Este é o segundo elemento. As margens se fundiram para 30 pixels.
      </div>