Cada uno de los elementos HTML que introducimos en el interior del body, se irán añadiendo dentro de nuestro documento HTML.

La manera en la que se posicionan/distribuyen estos elementos HTML dentro de un documento HTML, depende del valor que haya predefinido el consorcio de la W3C a ese TAG en concreto. Este comportamiento predefinido se puede modificar, vamos a ver un ejemplo.

Si por ejemplo creamos un documento HTML junto a una hoja de estilo CSS y añadimos 3 divs y 3 enlaces dentro del body del HTML. Es importante que los elementos tengan algún contenido en su interior (ya que sino no se visualizarán en el documento). Un código de ejemplo podría ser:

El resultado será el siguiente:

Si analizamos la web sin entrar por el momento en el inspector, podemos observar que tenemos 6 elementos. 3 de ellos, los divs, tienen un tipo de comportamiento  en el que cada uno de los elementos ocupan toda la fila. En cambio, los elementos anchor (hipertextos/enlaces) tienen un tipo de comportamiento en el que los enlaces se alinean dentro de la misma fila.

Esta serie de comportamientos u otros dependiendo de la etiqueta como ya hemos dicho los ha predefinido previamente el consorcio de la W3C. Y afectaran en cómo se posicionan estos elementos dentro de las páginas web.

Si abrimos el inspector de Chrome (F12) y pulsamos sobre el selector de elementos en la página a inspeccionar:

Cuando pasemos el cursor sobre cualquiera de los elementos, por ejemplo sobre uno de los divs, podemos ver que ahora aparece toda la fila con un sombreado en azul. Si miramos dentro del código del inspector podemos ver que también “se pone en azul”. Esto nos sirve para saber qué tipo de valor predefinido de posicionamiento tiene este elemento.

En el caso de que hagamos lo mismo sobre uno de los elementos anchor, podremos ver que:

Cuando nos situamos sobre un enlace, este no ocupa toda la fila.

Otra opción para observar esto podría ser el añadir bordes, márgenes y colores a los elementos del HTML desde CSS. Vamos a ver:

El resultado de lo que hemos hablado antes ahora se podrá ver bastante mejor y a la vez. Vamos a ver el ejemplo:

Los elementos son unidireccionales (solamente se pueden posicionar hacía una dirección) ya que vienen con una dirección auto predefinida por defecto. Solamente se pueden posicionar o bien hacía derecha o bien hacía abajo.

Estás maneras de posicionarse que trae automáticamente definida cada etiqueta en HTML, pueden dividirse en:

  • Block (en bloque): los elementos en bloque, ocupan toda la línea. Por tanto, son contenedores que ocuparan toda la fila. Podríamos decir que no quieren cuentas con nadie son etiquetas “solitarias” y “egoístas” que quieren/acaparan toda la fila para ellas.
  • Inline (en línea): los elementos en línea se agrupan en una misma línea siempre que haya el espacio suficiente como para continuar albergando elementos. Sino bajaran a la siguiente línea. Si elimináramos uno de los elementos superiores, el elemento que baja a la línea inferior al tener hueco se desplazará a la línea superior. Podríamos decir que son “amigables” y “solidarías” ya que comparten la fila entre ellas.

Valor predefinido de las etiquetas Inline vs Block

Como hemos hablado anteriormente, las etiquetas tienen unos valores predefinidos (Inline o Block) que serán los que determinen como se posicionarán estos elementos en nuestra página web. Un ejemplo de ello podría ser:

Si miramos la imagen superior, podremos ver que los divs forman parte de los elementos de bloque. En cambio, los elementos anchor (a) forman parte de los elementos en línea.

Vamos a ver unas imágenes para nos van a acabar de hacer entender el concepto de Inline vs Block al 100 %:

¿Cómo modifico el comportamiento predefinido de los elementos HTML?

Anteriormente, cuando explicábamos los elementos predefinidos hemos comentado que pese a que la W3C les establece un valor predefinido. Esto se puede modificar modificando a su vez su comportamiento.

Todo tag que actúa como block tiene predefinida una propiedad de CSS llamada display con valor block.

Todo tag que actúa como inline tiene predefinida una propiedad de CSS llamada display con valor inline.

Si precisamente añadimos a CSS displays div (block) y anchor (inline):

Si abrimos nuestra página HTML, podemos observar que nada ha cambiado. Esto es debido a que le acabamos de aplicar los comportamientos que ya traen predefinidos por defecto:

En cambio, si modificamos los displays div (inline) y anchor (block):

Podemos ver que ahora sí que se nos ha modificado los comportamientos ya que hemos invertido los comportamientos que vienen predefinidos por defecto:

Padding VS Margin

Para hablar de inline-block, tenemos que detenernos primeramente a hablar sobre padding y margin. Vamos a ver que son:

  • Padding → (del borde hacía dentro): distancia que queremos mantener sobre los elementos de nuestro alrededor (fuera) de nuestro elemento.
  • Margin (del borde hacía fuera):  distancia que queremos mantener con otros elementos contenidos en su interior dentro.

Por tanto, padding es para la distancia con los elementos de dentro y margin con los elementos de fuera.

Trabajando con padding y margin en un elemento con la propiedad display:inline

El inline, podemos modificar/controlar tanto el padding (en todas sus facetas) como el margin en izquierda y derecha:

Un ejemplo podría ser:

Si miramos el padding situándonos sobre el elemento anchor, y posteriormente pulsando sobre el padding de podemos observar que se aplica indistintamente a los 4 lados (left, right, top y bottom). Muestra de ello, es que visualmente se ve proporcionado (todos los lados iguales) además de que coge un color azulado toda la parte del relleno interior (del borde para dentro).

En cambio, si nos situamos en la propiedad margin, podemos observar que no se aplica en los 4 lados, sino que solamente se aplica en left y right. En caso del margin, se pone anaranjado:

Display none

Vamos a hablar sobre otra propiedad de display que no aparece por defecto. Si aplicamos display none, a los elementos anchor, por ejemplo:

Podemos ver que, los elementos anchor desaparecen, aunque son visibles desde el inspector del navegador:

Añadiendo código en caliente desde el inspector

Existe la posibilidad de añadir código “en caliente” desde el propio navegador, vamos a ver un ejemplo. Para ello, abrimos el inspector y vamos a seleccionar el elemento sobre el que queremos ver sus estilos CSS:

En este caso, vamos a modificar su display:

El “cambio en caliente” se hace solo en el navegador, no modificará nuestro código, de hecho si recargamos la página nuevamente (con F5), volveremos al punto inicial perdiendo estás modificaciones.

Display inline-block

Hasta ahora hemos visto, las propiedades display, block y none. Vamos a hablar sobre una la que es para mí la más difícil de las vistas hasta ahora, la propiedad más potente que hemos visto hasta ahora, la propiedad inline-block (un poquito más abajo veréis el porqué).

Inline-block, está a medio camino entre las dos propiedades que engloba inline y block.

Por lo que mostrará los elementos en línea, pero a su vez respetando todas las facetas del padding y del margin.

Vamos a ver un ejemplo:

Como le hemos añadido un margen superior de 50px, podemos ver como se desplaza hacia abajo.

Controlar los márgenes superiores e inferior lo hace una herramienta muchísimo más potente que el inline. Ya que con inline, en cambio, no perdemos el control sobre el margen superior e inferior. Lo que nos otorga un control más sencillo a la hora de poder centrar un menú, etc. Evitándonos muchos dolores de cabeza con ello.

Espero que os haya gustado el artículo ¡Saludos!