Block vs Inline

Todo elemento HTML tiene asignado un valor por defecto de visualización en función de su tipo. Según dicho valor podemos clasificar los elementos HTML en dos grandes grupos:

Elementos de tipo block: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>..<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
Elementos de tipo inline: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>,<script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

La diferencia reside en que los elementos de tipo block no permiten que se alojen otros elementos a su lado, ni a izquierda ni a derecha, es decir reservan el 100% del ancho de la pantalla para ellos mismos, ocupen lo que ocupen, obligando a los elementos colindantes a apilarse debajo de ellos. Por el contrario, los elementos de tipo inline si que permiten otros elementos a su lado, siempre y cuando sean de tipo inline también. Por esta razón, la mayoría de las etiquetas que alteran o modifican el significado del texto son de tipo inline. Además, un elemento de tipo block puede contener elementos de tipo inline, pero no a la inversa. Otra diferencia notable es la posibilidad de modificar ciertas propiedades de estilo como el ancho, alto y márgenes que se tratarán en temas posteriores vinculados a CSS3.

 <body>
    ...
    <p>Los párrafos son de tipo bloque</p><p>No obstante las etiquetas de formato como <strong>strong</strong> o <mark>mark</mark> no lo son.</p>
    ...
</body>

La tipología de un elemento puede ser alterada mediante reglas CSS, es decir podemos convertir un elemento de tipo block en tipo inline y viceversa.

AnteriorT02: HTML5 - Organización de contenido SiguienteEstructura típica del cuerpo de una web

Última actualización hace 3 años

¿Te fue útil?