Las diferencias entre elementos en línea y a nivel de bloque

HTML se compone de varios elementos que actúan como bloques de construcción de páginas web. Cada uno de estos elementos se clasifica en una de dos categorías: elementos a nivel de bloque o un elemento en línea. Comprender la diferencia entre estos dos tipos de elementos es un paso importante en la creación de páginas web.

Elementos de nivel de bloque

Entonces, ¿qué es un elemento a nivel de bloque? Un elemento a nivel de bloque es un elemento HTML que comienza una nueva línea en una página web y extiende el ancho completo del espacio horizontal disponible de su elemento padre. Crea grandes bloques de contenido como párrafos o divisiones de página. De hecho, la mayoría de los elementos HTML son elementos a nivel de bloque.

Los elementos a nivel de bloque se utilizan dentro del cuerpo del documento HTML. Pueden contener elementos en línea, así como otros elementos a nivel de bloque.

Elementos en línea

A diferencia de un elemento a nivel de bloque, un elemento en línea:

• Puede comenzar dentro de una línea.
instagram viewer
• No inicia una nueva línea.
• Su ancho solo se extiende hasta donde está definido por sus etiquetas.

Un ejemplo de un elemento en línea es el , que hace que la fuente del contenido del texto esté en negrita. Un elemento en línea generalmente solo contiene otros elementos en línea, o no puede contener nada en absoluto, como el
romper etiqueta.

También hay un tercer tipo de elemento en HTML: aquellos que no se muestran en absoluto. Estos elementos proporcionan información sobre la página, pero no se muestran cuando se representan en un navegador web.

Por ejemplo:

•  define metadatos.
•  es el elemento del documento HTML que contiene estos elementos.

Cambio de tipos de elementos en línea y en bloque

Puede cambiar el tipo de un elemento de en línea a bloque, o viceversa, usando una de estas propiedades CSS:

• bloqueo de pantalla; 

• pantalla: en línea; 

• pantalla: ninguna;

La CSS la propiedad de visualización le permite cambiar una propiedad en línea para bloquear, o un bloque para en línea, o no mostrar en absoluto.

Cuándo cambiar la propiedad de visualización

En general, deje la propiedad de visualización sola, pero hay algunos casos en los que el intercambio de propiedades de visualización en línea y en bloque puede resultar útil.

• Menús de lista horizontal: Las listas son elementos de nivel de bloque, pero si desea que su menú se muestre horizontalmente, debe convertir la lista en un elemento en línea para que cada elemento del menú no comience en una nueva línea.
• Encabezados en el texto: A veces, es posible que desee que un encabezado permanezca en el texto, pero mantenga los valores del encabezado HTML. Cambiar los valores de h1 a h6 a en línea permitirá que el texto que viene después de su etiqueta de cierre continúe fluyendo junto a él en la misma línea, en lugar de comenzar en una nueva línea.
• Eliminando el elemento: Si desea eliminar un elemento por completo del documento flujo normal, puede configurar la pantalla en

  ninguno

  Una nota, tenga cuidado al usar la pantalla: ninguna. Si bien ese estilo, de hecho, hará que un elemento sea invisible, nunca querrá usarlo para ocultar el texto que agregó por razones de SEO, pero que no desea mostrar a los visitantes. Esa es una forma segura de que su sitio sea penalizado por un enfoque de sombrero negro para el SEO.

Errores comunes de formato de elementos en línea

Uno de los errores más comunes que comete un recién llegado al diseño web es intentar establecer un ancho en un elemento en línea. Esto no funciona porque los anchos de los elementos en línea no están definidos por el cuadro contenedor.

Los elementos en línea ignoran varias propiedades:

• ancho

  y

  altura

• anchura máxima

  y

  Altura máxima

• ancho mínimo

  y

  altura mínima

Si necesita definir el ancho o alto que debe ocupar un elemento, querrá aplicarlo al elemento de nivel de bloque que contiene su texto en línea.