CSS INLINE vs BLOCK vs INLINE-BLOCK ELEMENTS

Ever wondered how content on webpages seem to follow a specific design layout? With some filling the entire width of the screen and others just laying side by side? This is due to the effects of display properties like Inline, Inline-Block and Block. These elements determine how content is displayed and how they interact with other content on the webpage.

In this article, we will discuss the difference between these elements and their functions. By the end of this guide, you will be able to note their differences along with a few code examples to show how they are applied.

inline element

This element displays content on the same line. Applying size properties (height and width) has no effect as content with this property does not start on a new line and only takes its default space.

.inline-element  {
   display: inline;
   width: 2800px; /* No Effect*/
   height: 1000px; /* N0 Effect */
}

The image below shows an example of content that possesses inline element;

block element

This element displays content row after row. This means content is made to appear above one other, with each one taking up a row (depending on the size of the content).

.block-element {
  display: block;
}

Below is an example of content that possess block element;

Unlike with inline element, the height and width of content here can be adjusted to any preferred size.

inline-block elements

We know that inline element keeps content on the same row, and block element arranges content one above the other, well the inline-block element is a combination of the first two. Think of it as an inline element whose size attributes can actually be adjusted.

.inline-block-element  {
   display: inline-block;
   width: 100px; /* It will work */
   height: 100px; /* It will work */
}

See an example below;

In the above example, the letters A, B and C all have different size attributes but are all inline (no pun intended).

Let us try one more example using inline-block element, this time adding some HTML for better understanding;

<div class="inline-block-element" 
     id="letterA">A</div>
<div class="inline-block-element" 
     id="letterB">B</div>
<div class="inline-block-element" 
     id="letterC">C</div>
<div class="inline-block-element" 
     id="letterD">D</div>
<div class="inline-block-element" 
     id="letterE">E</div>
<div class="inline-block-element" 
     id="letterF">F</div>

Now we add our CSS below;

.inline-block-element {
  display: inline-block;
  background-color: purple;
  color: gold;
  margin: 5px;
}

#letterA {
  height: 100px;
  width: 170px;
}

#letterB {
  height: 90px;
  width: 20px;
}

#letterC {
  height: 67px;
  width: 100px;
}

#letterD {
  height: 90px;
  width: 200px;
}

#letterE {
  height: 300px;
  width: 50px;
}

#letterF {
  height: 70px;
  width: 200px;
}

Thorough knowledge of basic display elements like these can be a big help to Frontend developers anywhere. It is also important to practice using display elements as it can boost creativity and flexibility. To learn about other CSS display elements, feel free to log on to https://www.geeksforgeeks.org/css-display-property/