Espaciados

2.1 Espaciado Interno (Padding)

Los espaciados internos (padding) definen el espacio entre el contenido de un elemento y sus bordes. padding se puede asignar a cada lado del elemento: arriba, derecha, abajo e izquierda. Los espaciados internos son útiles para crear espacio alrededor del contenido del elemento para que no esté pegado a los bordes.

Ejemplo de uso

En este ejemplo, al elemento con la clase .padding se le aplican espaciados internos de 20 píxeles en todos los lados, creando un espacio alrededor del contenido.

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

    
      <div class="padding">
        Este es un elemento con espaciados internos.
      </div>
    
  

2.2 Espaciado Externo (Margin)

Los espaciados externos (margin) definen el espacio entre un elemento y los elementos vecinos. Los espaciados externos pueden asignarse a cada lado del elemento: arriba, derecha, abajo e izquierda. Los espaciados externos son útiles para crear espacio entre elementos para evitar que se superpongan.

Ejemplo de uso:

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

    
      <div class="margin">
        Este es un elemento con espaciados externos.
      </div>
    
  

2.3 Interacción de los componentes del modelo de caja

Los cuatro componentes del modelo de caja (contenido, relleno, bordes y márgenes) trabajan juntos para definir el tamaño total y la ubicación de un elemento en la página.

Ejemplo de interacción de componentes:

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

    
      <div class="box">
        Este es un elemento con espaciados externos e internos.
      </div>
    
  

Explicación del código:

• Contenido: texto dentro del elemento
• Relleno: 20 píxeles, creando espacio entre el contenido y el borde
• Bordes: 5 píxeles, rodeando el elemento
• Espaciado externo: 30 píxeles, creando espacio entre el elemento y otros elementos en la página

2.4 Márgenes negativos

Los márgenes externos pueden tener valores negativos, lo que resulta en la superposición de elementos.

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

    
      <div>
        Este es un elemento normal
      </div>
      <div class="negative-margin">
        Este es un elemento con margen superior negativo.
      </div>
    
  

2.5 Colapso de márgenes

Cuando los márgenes verticales de dos bloques vecinos se encuentran, pueden colapsar, formando un único margen igual al mayor de los dos.

    
      .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 es el primer elemento.
      </div>

      <div class="box2">
        Este es el segundo elemento. Los márgenes colapsaron a 30 píxeles.
      </div>