4-Bloques HTML y elementos en línea

 

¿Qué es display: block; en CSS?

display: block; es una propiedad de CSS que define cómo se muestra un elemento en la página web. Cuando un elemento tiene display: block, se comporta como un "bloque" que ocupa todo el ancho disponible de su contenedor.

Características principales:

1. Ocupa todo el ancho disponible - El elemento se expande para llenar el espacio horizontal de su contenedor

2. Crea un salto de línea - Comienza en una nueva línea y el contenido siguiente también comienza en una nueva línea

3. Permite modificar dimensiones - Se pueden establecer width, height, padding y margin libremente

4. Apila elementos verticalmente - Los elementos block se colocan uno encima del otro

Elementos HTML que son block por defecto:

• <div>

• <p> (párrafos)

• <h1> a <h6> (encabezados)

• <section>

• <article>

• <header>

• <footer>

• <ul>, <ol>, <li>

Ejemplo práctico:

css

/* Convertir un elemento en bloque */
.mi-elemento {
    display: block;
    width: 300px;      /* Podemos establecer un ancho específico */
    height: 100px;      /* Podemos establecer una altura */
    margin: 20px;       /* Los márgenes funcionan en todas direcciones */
    padding: 15px;       /* El padding también funciona correctamente */
    background-color: lightblue;
}

Comparación con otros valores de display:

• display: inline; - Solo ocupa el espacio necesario, no permite width/height

• display: inline-block; - Como inline pero permite width/height

• display: none; - Oculta completamente el elemento

Ejemplo visual:

html

<div style="display: block; background: red;">Bloque 1</div>
<div style="display: block; background: blue;">Bloque 2</div>
<!-- Los bloques aparecerán uno debajo del otro -->

¿Te gustaría que profundice en algún aspecto específico de los elementos block?

Cada elemento HTML tiene un valor de visualización predeterminado, dependiendo del tipo de elemento que sea.

Los dos valores de visualización más comunes son bloque y en línea.

---

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea y los navegadores agregan automáticamente algún espacio (un margen) antes y después del elemento.

Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como puede).

Dos elementos de bloque comúnmente utilizados son: <p> y <div>.

El <p>elemento define un párrafo en un documento HTML.

El <div>elemento define una división o una sección en un documento HTML.

El elemento <p> es un elemento de nivel de bloque.

El elemento <div> es un elemento de nivel de bloque.

Ejemplo

<p>Hello World</p>
<div>Hello World</div>

Aquí están los elementos a nivel de bloque en HTML:

< dirección >

< artículo >

< aparte >

< cita en bloque >

< lienzo >

<dd>​​

<div>​​

< dl >

<dt>​​

< conjunto de campos >

< figcaption >

< figura >

< pie de página >

< formulario >

< h1 > - < h6 >

< encabezado >

< hora >

< li >

< principal >

< navegación >

< sin guión >

< ol >

< p >

< pre >

< sección >

< tabla >

< tfoot >

<ul>​​

< vídeo >

---

Elementos en línea

Un elemento en línea no comienza en una nueva línea.

Un elemento en línea solo ocupa el ancho necesario.

Este es un elemento <span> dentro de un párrafo.

Ejemplo

<span>Hello World</span>

Aquí están los elementos en línea en HTML:

< a >

< abr . >

< acrónimo >

< b >

< bdo >

< grande >

< br >

< botón >

< citar >

< código >

<dfn>​​

< em >

< yo >

< imagen >

< entrada >

< kbd >

< etiqueta >

< mapa >

< objeto >

< salida >

< q >

< muestra >

< script >

< seleccionar >

< pequeño >

< span >

< fuerte >

< sub >

< sup >

< área de texto >

< tiempo >

<tt>​​

<var>​​

Nota: ¡Un elemento en línea no puede contener un elemento a nivel de bloque!

ss

El elemento <div>

El <div>elemento se utiliza a menudo como contenedor para otros elementos HTML.

El <div>elemento no tiene atributos obligatorios, pero y styleson comunes.classid

Cuando se utiliza junto con CSS, el <div>elemento se puede utilizar para dar estilo a bloques de contenido:

Ejemplo

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Aprenderás más sobre el <div>elemento en el próximo capítulo .

---

El elemento <span>

El <span>elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.

El <span>elemento no tiene atributos obligatorios, pero y styleson comunes.classid

Cuando se utiliza junto con CSS, el <span>elemento se puede utilizar para dar estilo a partes del texto:

Ejemplo

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

o

Resumen del capítulo

• Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible
• Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
• El <div>elemento es un elemento de nivel de bloque y a menudo se utiliza como contenedor para otros elementos HTML.
• El <span>elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.