Modelo de Bloques en HTML

9.1 Elementos de Bloque

Modelo de Bloques en HTML — es un concepto que describe la estructura y presentación de los elementos HTML en un documento. Ayuda a los desarrolladores a entender cómo los elementos interactúan entre sí y cómo se disponen en la página. Entender el modelo de bloques es importante para crear páginas web estructuradas y estéticamente atractivas.

El modelo de bloques en HTML consta de dos tipos principales de elementos: bloque e en línea. Estos elementos juegan un papel clave en el diseño de páginas web.

Elementos de bloque

Ejemplo de un elemento de bloque:

    
      <div>
        <h1>Título</h1>
        <p>Este es un párrafo de texto dentro de un elemento de bloque div.</p>
      </div>
    
  

9.2 Elementos en línea

Elementos en línea (inline-level elements) ocupan solo el ancho necesario para su contenido y no comienzan en una nueva línea. Pueden contener solo elementos en línea o texto. Ejemplos de elementos en línea:

Ejemplo de un elemento en línea:

    
      <span>Este es un párrafo con <strong>texto en negrita</strong> y <em>cursiva</em>.</span>
    
  

9.3 Componentes del modelo de bloques

Cada elemento en el modelo de bloques se puede representar como un bloque rectangular compuesto por las siguientes partes:

• Contenido (Content): contenido interno del elemento, por ejemplo, texto o imagen
• Relleno (Padding): espacio entre el contenido y el borde del elemento
• Borde (Border): línea que rodea el relleno y el contenido
• Margen (Margin): espacio entre el borde del elemento y los elementos adyacentes

Visualización del modelo de bloques:

    
      .element {
        width: 200px;           /* Ancho del contenido */
        padding: 10px;          /* Relleno */
        border: 2px solid red;  /* Borde */
        margin: 20px;           /* Margen */
      }
    
  

Ejemplo de HTML con modelo de bloques:

En este ejemplo, el elemento <div> con la clase "box" tiene un ancho de 200px, un relleno de 10px, un borde de 2px y un margen de 20px. Estas propiedades determinan cómo se muestra el elemento en la página y cómo interactúa con otros elementos.

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

    
      <div class="box">
        Este es un ejemplo del modelo de bloques.
      </div>