CSS Block, Inline, Inline-Block demystified!

Among the plethora of properties of CSS, “display” stands out as one of the most fundamental yet misunderstood concepts. If you have ever wondered how elements flow and interact within a webpage, but still, it doesn’t make any sense, this might be the one you should read.

Before diving deeper into the display properties, there is something to know about HTML elements.

Block Level Elements & Inline Elements.

Each HTML element out of the box (by default, I would say), has different behaviours in the document layout, which are categorized as block-level elements and inline elements. Understanding the distinct between these elements is crucial for creating well-structured layouts.

Block Level Elements: Each block-level element starts on a new line of the document (page layout) and occupies the full available width of the parent container by default. These elements stack vertically on top of each other, creating a clear separation between them. That means block-level elements do not sit next to each other horizontally by default. And mainly block-level elements allow setting paddings, margins, width, and height and can contain other block-level and inline elements. Common examples of block-level elements are <div> , <p> , <h1>, <form>.

Inline Elements: unlike block elements, inline elements behave in completely different ways on a layout. They occupy only the width of their content, not the full available width and mainly they don’t create a new line. Inline elements are typically used to style or format parts of the text within a block-level element but do not allow setting the width, height, or margins(You can only set margins vertically). Inline elements by default sit next to each other horizontally. Some of common inline elements are <span>, <a>, <strong>, <em>

So what is the deal with those display properties?

Long story short, CSS display properties control how an HTML element is shown on the layout regardless of its default behaviour.

For example, the default <div> element originally is a block-level element. Once we lie out a div element it occupies the whole available space of the parent element and creates a box. (refer to the following code snippet and screenshot)

<div class="parent">
<h1 class="title">Block / Inline / Inline-Block Demystified</h1>
<div class="block orange"> Block 1 </div>
</div>

the div element called ‘block’ occupies the whole available space of the parent div.

what if we don’t want this ‘block’ div not to occupy the entire line? or what if we want another ‘block’ div to sit next to the first block like a column? Easy right? Changing the width of the block will do the thing! or will it?

<div class="parent">
<h1 class="title">Block / Inline / Inline-Block Demystified</h1>
<div class="block orange"> Block 1 </div>
<div class="block green"> Block 2 </div>
</div>

bonkers! changing width doesn’t affect the behaviour of an element.

This is mad, right? You can see there is more than enough space in the first line for the second block to render next to the first block. Space is enough for even 3 blocks to fit in. But still, blocks are behaving like they owned the whole line space.

The culprit for this is the default behaviour of the elements we discussed earlier. This is when the fancy display properties come into the show.

All right! those two blocks render on the same line now. But!

As you can see these blocks are now rendered on the same line. But you can see that some properties like margins and width do not affect the elements. What it means is even though ‘block 1’ and ‘block 2’ are divs’ now they are behaving like inline elements. Since you get the point let’s dig deeper into those 3 properties.

`display: block;`: This value makes an element behave as a block-level element. When you set an element’s display property to ‘block’, it has the following characteristics:

2 divs’ and 2 anchor tags using the`display: block` property.

1. Block-level Box: The element creates a rectangular block-level box that extends the full width of its containing element, pushing the next content onto a new line below it. As you know, the width of a block-level element is set to 100% of its parent container’s width. But, you can also set a specific width using CSS properties. The height of a block-level element is determined by its content or can be set manually using CSS properties. It will expand vertically to accommodate its content unless the height is set manually.
2. Margins and Padding: Block-level elements can have margins and padding. Margins will push other elements away, padding adds space inside the element.
3. Vertical Alignment: Block-level elements are vertically aligned to the baseline of the text within them by default, but this can be adjusted using CSS properties

`display: inline;`: This value makes an element behave as an inline element. When you set an element’s display property to ‘inline’, it has the following characteristics:

2 divs’ and 2 anchor tags using the`display: inline` property.

1. Inline-level Box: The element generates an inline-level box that does not break the flow of text (or does not break the line). It remains within the normal text flow, allowing other inline elements to appear on the same line before or after it. The width and height of an inline element are determined by its content, rather than being able to be explicitly set. The element will expand horizontally to accommodate its content.
2. Margins and Padding: Inline-level elements can have horizontal margins and padding applied to them, but vertical margins are often ignored. Margins and padding may affect the space around the element but won’t break the line.
3. Vertical Alignment: Inline-level elements are vertically aligned to the baseline of the text within their containing line box by default. This alignment can be adjusted using CSS properties.

`display: inline-block;`: This is a very special display property which creates elements that combine the characteristics of both inline and block-level elements. This property is useful when you want an element to have block-level properties, such as the ability to set width, height, padding, and borders, while keeping the inline flow of content. When you set an element’s display property to ‘inline-block’, it has the following characteristics:

2 divs’ and 2 anchor tags using the`display: inline-block` property.

1. Inline Flow: Like inline elements, an element with an `inline block` remains in the inline flow of the content. This means it doesn’t force a new line and can be placed beside other inline and inline-block elements.
2. Block-Level Characteristics: Despite being in the inline flow, an inline-block element can be styled with various block-level properties such as width, height, padding and margins. You can manually set width and height values for an inline-block element, which is different from regular inline elements that only take the space needed by their content.
3. Vertical Alignment: An inline-block element can be vertically aligned within its containing element, allowing for more precise alignment in relation to the surrounding content.

• The most common use cases for the inline-block elements are creating navigation menus, buttons, and items within a list that need to have specific dimensions.

There are other cool display properties like ‘flex’ and ‘grid’ which will be explained in the next article. But for now, we conclude our journey through the world of CSS display properties, you now possess the knowledge and expertise to wield these tools with confidence. By mastering the block, inline, and inline-block properties, you can take your web design skills to new heights. Remember, each display type has its place in the grand design of a webpage, and choosing the right one can significantly impact user experience and visual appeal. Peace out and Happy coding!!!