Cracking the CSS Display:inline, block, inline-block, none && visibility:hidden.

Photo by Fabian Stroobants on Unsplash

In this article, we are going to perform a deep-dive maneuver to unravel the mystery behind the CSS display property. To start with, we need to ask ourselves what is a property? Easy isn’t it, well yeah, probably if you are reading this article you probably know what is a CSS property. Ok that’s is enough chit chat lets dive… The article is divided into two sections

• Inline vs Block,
• Hidden Elements.

By default, current browsers treat every HTML element as a block element. However, CSS has a different cocktail recipe for displaying elements on the DOM:- the — inline, and block. However, there is a third smoothy called the inline-block.

Block Elements:

A block element — as its name suggest, places elements on a new line and accepts both the length and width(row and column) properties. Additionally, the block elements accept both the padding and margin properties[top, right, bottom, right], a concept every programmer should memorize before being struck by a css bug, a yuckish! thing if you ask me. The <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> are all block elements.

Note: the with, height, margin, and padding properties take effect. The block elements also occupy new lines irrespective of the available width

Inline Elements:

An inline element — on the other doesn’t have to appear on new lines, they always and do appear one after the other especially in paragraphs(side by side if you may). In other words, they are placed one after the other till the width of the browser is filled and that is when a next line treatment is considered by the browser. Easy-peasy right! but hold on, there is a margin-padding spooky trap here. The inline element behaves differently in the browser. One can add padding and margin(left and right) side only. The length and width properties are disregarded and don’t take effect. Examples <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements.

Inline-Block:

Inline-block (probably the wild card) — is the most used display property if not flex. It concatenates the different characteristic emulated by inline and block elements and packs them into a standalone tool. By this I mean, inline-block elements allow both margins and padding 360 degrees, height, and widths and also respected hence taking effect upon styling. the elements are placed side by side till the full width of the available space is fully occupied thereafter a next line placement is considered.

Inline block display property contains both the inline and block elements characteristics. Note the div and the span elements are both treated as if inline elements by default. the margins, padding, heights and width are as well respected.

Display: hidden and Visibility:none properties:

In this section of the article, we going to talk about Hidden elements. To achieve this we play around with display: hidden and visibility hidden. These two properties seem to do the same tweak but paying a closer look solves the unknown.

Display: none;

The second div element completely disappear from the DOM.

The <div> with a display: none, completely disappear from the DOM. The previous <div> element automatically fills and occupies the empty space left. That is because elements with display: none do exist on the HTML structure but are completely erased from the DOM itself.

visibility: hidden;

Note: the empty space left behind by the hidden element.

The <div> with a visibility: hidden, doesn’t show up on the browser at all. But leaves an empty space, and the void left behind can’t be filled by the remaining <div>s leaving an empty space between the two <div>s element.

Summary:

Here are the characteristics of inline elements

• Elements don’t take unnecessary space.
• Elements are placed next each other.
• margins are padding are disregarded.
• No control over the heights and widths of the elements.

Here are characteristics of Block elements

• Take the largest possible width.
• Every block element appears in a new line.
• Elements react to width and height properties.
• Elements can contain both inline and block elements.

Here are the characteristics of Inline-block elements;

• Elements exhibit the combination of inline and block level features.
• Commonly used in layout designs due to its flexibility.

There are many other display properties out there as well, which you can check out via the MDN docs. That is it…if you made it this far I know you are still wondering where the heck is flex? Now before you explode, check out this link(it provides a full coverage on CSS FlexBox — coming soon…)