Elementos inline, block e inline-block en HTML

0

HTML proporciona múltiples parámetros para  tener un total control sobre todos sus diferentes elementos, estos parámetro se conocen generalmente como atributos, estos le agregan comportamientos adicionales a dichos elemento pero por encima de estos, los elementos HTML están divididos en dos grandes grupos, o dos diferentes niveles que tienen su comportamiento establecido dentro de un documento HTML. (Aunque esto puede ser alterado por medio de los estilos CSS). Me refiero a los comportamientos iniciales que son aplicados a los elementos HTML: Bloque (Block) y  en línea (Inline). Básicamente son los comportamientos que definen el posicionamiento y flujo del elemento en el documento HTML.

Elementos a nivel de Bloque.

Los elementos a nivel de bloque (block) generalmente son contenedores, y estos ayudan a formar estructuras en el documento web, como son contenedores pueden envasar otros elementos de nivel bloque, estos elementos tienen características extendidas, por ejemplo: márgenes internos y externos, bordes, se le pueden aplicar altura y anchura (Propiedades del box model). Estos son representados en una nueva línea en el documento por lo que no puede tener otros elementos a sus lados, ya que ocupa el ancho de la línea disponible.

Elementos block

Elementos a nivel de Bloque:

article, aside, blockcode, blockquote, body, button, canvas, caption, col, colgroup, dd, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1 - h6, header, hr, li, map, object, ol, output, p, pre, progress, section, table, tbody, textarea, td, tfoot, th, thead, tr, ul, video

Elementos a nivel de Línea.

Los elementos en línea (inline) se posicionan en el documento sin afectar  su normal flujo, estos no pueden obtener las características que ofrecen las propiedades que dimensionan al elemento y tampoco rompe la línea como si o hace los elementos a nivel de bloque. Por lo general un elemento en línea solo puede contener texto u otros elementos en línea y como dije anteriormente este se renderiza en la línea donde se posicione sin trastornar el flujo en el documento y solo ocupará el tamaño que este se tome.

elementos-html-en-linea

Elementos HTML a nivel de Línea (inline):

a, abbr, address, area, b, cite, code, del, details, dfn, datalist, em, font, i, iframe, img, input, ins, kbd, label, legend, link, mark, meter, nav, optgroup, option, q, samp, small, select, source, span, strong, sub, summary, sup, textarea, tt, u, time

¿Elementos inline-block?

Si, se refiere a los elemento que siguen el flujo de líneas en el documento HTML sin afectarlo, pero que a su vez herede las características de un elemento de bloque.  Elementos como button, del, iframe, ins, map, object, y script pueden ser utilizados tanto como de forma de bloque (recibe las propiedades que afectan el box model) o de forma inline (sigue el flujo de líneas en un documento).

Elementos Inline-block

Importante, si se utilizan como elementos en línea, por ejemplo, dentro de otros elementos en línea o un parrafo, estos elementos no deben contener elementos a nivel de bloque.


Cabe decir que todos estos elementos HTML  poseen un comportamiento inicial (inline o block), esto gracias a las recomendaciones de la W3C que define ciertos estilos por default a los elementos y que son implementados en los diferentes navegadores, pero este comportamiento puede ser modificado según nos convenga por medio de las hojas de estilos CSS. Podemos hacer que cualquier elemento block  se comporte de forma inline y viceversa, esto lo hacemos por medio de la propiedad de CSS: display.

En este vídeo te lo explico a detalle:

Comentar

avatar
wpDiscuz