teoria de medidas web sobre los margenes inferiores

 

Actualización: Márgenes Inferiores en rem

(Basado en 1rem = 16px)

---

1. Listas en la Sección Content (ul/li)

• Margen inferior entre ítems (li)

  • Recomendado: 0.5rem - 1rem (8px - 16px).

  • Objetivo: Separación suficiente para escanear rápidamente, sin romper la continuidad del contenido.

  • Ejemplo:

    css

    Copy

    .content-list li {
      margin-bottom: 0.75rem; /* 12px */
    }

---

2. Título de la Sección Content

• Margen inferior del título (h2, h3, etc.)

  • Recomendado: 1rem - 1.5rem (16px - 24px).

  • Objetivo: Espacio visual para separar el título del cuerpo de texto o lista que le sigue.

  • Ejemplo:

    css

    Copy

    .content-title {
      margin-bottom: 1.25rem; /* 20px */
    }

---

3. Título de la Sección Hero

• Margen inferior del título hero (h1)

  • Recomendado: 1.5rem - 2.5rem (24px - 40px).

  • Objetivo: Espacio dramático para destacar el mensaje principal y guiar hacia el CTA o subtítulo.

  • Ejemplo:

    css

    Copy

    .hero-title {
      margin-bottom: 2rem; /* 32px */
    }

---

Tabla Resumen de Márgenes

Elemento	Margen Inferior (rem)	Equivalente en px
Lista (li) en content	0.5rem - 1rem	8px - 16px
Título de sección content	1rem - 1.5rem	16px - 24px
Título hero (h1)	1.5rem - 2.5rem	24px - 40px

---

Reglas de Espaciado para Diseño Web

1. Relación con el interlineado:

   • El margen inferior de un elemento debe ser igual o mayor que su line-height.

   • Ejemplo: Si un h2 tiene line-height: 1.4, el margin-bottom debería ser mínimo 1.4rem.

2. Jerarquía proporcional:

   • Los márgenes deben escalar según la importancia del elemento:

     • Título hero: Mayor margen (2rem).

     • Subtítulo: Margen mediano (1.25rem).

     • Texto cuerpo: Margen pequeño (0.75rem).

3. Responsive:

   • Reduce márgenes en móviles (ej: margin-bottom: 1.5rem en desktop → 1rem en móvil).

   css

   Copy

   .hero-title {
     margin-bottom: 2rem; /* Desktop */
   }
   @media (max-width: 768px) {
     .hero-title {
       margin-bottom: 1.5rem; /* Mobile */
     }
   }

---

Ejemplo de Implementación Completa

css

Copy

/* Sección Hero */
.hero-title {
  font-size: 3rem; /* 48px */
  margin-bottom: 2rem; /* 32px */
}

/* Sección Content */
.content-title {
  font-size: 2rem; /* 32px */
  margin-bottom: 1.25rem; /* 20px */
}

.content-list li {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  margin-bottom: 0.75rem; /* 12px */
}

---