Diferencias entre display: block, inline, inline-block y none

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!

25 comentarios

  1. I’m gone to convey my little brother, that he should also go to see this weblog on regular basis to get updated from newest news
    update.

  2. Hi there, all the time i used to check blog posts here
    early in the dawn, for the reason that i enjoy to learn more
    and more.

    Feel free to visit my web-site – Arctos Portable Air Conditioner – Winnie,

  3. I’m truly enjoying the design and layout of your
    blog. It’s a very easy on the eyes which makes it much more enjoyable for me
    to come here and visit more often. Did you hire out a developer to create your theme?

    Great work!

  4. I like this post, enjoyed this one thanks for posting.

    Review my web page Alpha Edge Pills

  5. After going over a number of the blog posts on your web page, I truly
    like your technique of blogging. I book-marked it to my bookmark
    webpage list and will be checking back in the near future.
    Take a look at my website as well and tell me how you
    feel.

  6. Whats up very cool web site!! Man .. Excellent ..
    Wonderful .. I will bookmark your website and take the feeds additionally?I’m satisfied to seek out a lot of helpful info here in the publish, we want develop extra techniques in this regard, thanks for sharing.

    Visit my blog; Libido Boost Pills Reviews

  7. I?m not that much of a internet reader to be honest but your sites really nice, keep
    it up! I’ll go ahead and bookmark your site to come back in the future.

    All the best

    Look into my page – Optimum Keto Reviews

  8. Thanks in support of sharing such a nice opinion, piece of writing is pleasant,
    thats why i have read it entirely

  9. Hello! I’m at work browsing your blog from my new iphone!
    Just wanted to say I love reading through your blog and look forward to all your posts!
    Carry on the superb work!

    Also visit my page – Niva CBD Gummies Reviews

  10. I think the admin of this website is actually working hard for his web page, as here every material is quality based stuff.

    Also visit my web blog: Libido Boost Male Enhancement Ingredients

  11. Hey! This is kind of off topic but I need some advice from an established blog.
    Is it hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast.

    I’m thinking about creating my own but I’m not sure where to begin. Do you have any ideas or suggestions?

    Cheers

    Visit my homepage: Green Leaf Hills CBD Oil

  12. Write more, thats all I have to say. Literally, it
    seems as though you relied on the video to
    make your point. You clearly know what youre talking about, why waste your intelligence on just posting videos to your blog when you could be giving
    us something informative to read?

  13. Every weekend i used to pay a visit this site, for the reason that
    i want enjoyment, as this this website conations in fact pleasant funny stuff too.

    Feel free to surf to my web blog … Wawza Apple Cider Vinegar

  14. It’s actually a great and helpful piece of information. I am glad that
    you just shared this helpful information with us. Please stay us up to date like this.
    Thank you for sharing.

  15. I wanted to follow up and let you know how really I treasured discovering
    your site today. I would consider it a great honor to operate at my
    company and be able to use the tips contributed on your
    web page and also participate in visitors’ feedback like this.
    Should a position connected with guest article writer become offered at your end, you should let me know.

    Also visit my page :: forum.techzooka.com

  16. Hi there friends, nice paragraph and nice arguments commented here, I am really
    enjoying by these.

    Here is my blog; The Skin Company

  17. This is the perfect website for everyone who wants to
    understand this topic. You know a whole lot its almost hard to argue with
    you (not that I actually will need to…HaHa). You certainly put a brand new spin on a topic that has been discussed for many years.
    Wonderful stuff, just wonderful!

    my web site … Alpha Edge

  18. I view something really interesting about your website so I saved to my bookmarks.

    Here is my web-site – NeoPodz Earbuds

  19. I really love your website.. Great colors & theme. Did you develop this web site yourself?

    Please reply back as I’m planning to create my own blog and would like to know where you got this from or just what the theme is called.
    Cheers!

  20. You are my inhalation, I own few web logs and very sporadically run out from
    post :).

    Here is my web blog :: Testo Bull

  21. It’s really a cool and helpful piece of information. I’m satisfied that you
    simply shared this helpful info with us. Please keep
    us up to date like this. Thank you for sharing.

  22. We are a bunch of volunteers and starting a new scheme in our community.
    Your web site offered us with useful information to
    work on. You’ve performed an impressive activity and our whole neighborhood might be grateful to you.

    my site – foroagua.com

  23. Can I simply just say what a comfort to uncover an individual
    who truly knows what they are discussing on the
    web. You definitely realize how to bring an issue to light and make it important.
    More people have to look at this and understand this side
    of the story. I can’t believe you aren’t more popular since you
    certainly possess the gift.

  24. This is my first time pay a visit at here and i am in fact impressed to read everthing at alone place.

    Here is my blog; https://glinzee.com/user/profile/5105

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar