html

Inline and Block Level Elements in CSS | Explained

The fundamental web programming language, HTML, consists of a vast range of elements that are considered as elementary units of a web page. These elements can be classified into two major groups which are Inline Elements and Block Level Elements. Being aware of these two categories and their differences is highly significant. This tutorial enlightens its readers about the following;

  1. Inline Elements
  2. Block Level Elements
  3. How to swap Inline and Block Level Elements

Let’s get started.

Inline Elements

Elements that consume only the required amount of space are called Inline Elements. They can also be referred as elements that are displayed in a line.

These elements do not start from a new line, moreover, you can place multiple inline elements in the same line.

HTML inline elements are <span>, <a>, <img>, <script>, <button>, <site>, <label>, <small>, <var>, <abbr>, <code>, <map>, <acronym>, <dfn>, <object>, <strong>, <b>, <em>, <output>, <sub>, <bdo>, <i>, <q>, <sup>, <big>, <samp>, <textarea>, <br>, <input>, <time>, <kbd>, <select>, and <tt>.

In the screenshot attached below, you can see that <button> is an inline element and is taking only the amount of space required.

Now if you add another inline element, for instance another button, then it will not be displayed on a new line instead it will be displayed adjacent to the previous button.

This is how inline elements work.

Now that we have understood the concept of inline elements, let’s explore block level elements.

Block Level Elements

Elements that consume all the space available (from left to right), and start from a new line are regarded as Block Level Elements.

Block level elements are capable of holding inline elements along with other block level elements. Majority of the elements in HTML are block level elements.

HTML block level elements are <div>, <ol>, <ul>, <h1>to<h6>, <p>, <address>, <dt>, <hr>, <section>, <article>, <fieldset>, <li>, <table>, <aside>, <figcaption>, <main>, <tfoot>, <blockquote>, <figure>, <nav>, <canvas>, <footer>, <noscript>, <video>, <dd>, <form>, <dl>, <header>, <pre>.

In the screenshot attached below, you can see that <h1> is a block level element and is taking entire space from left to right.

Now if you add another block level element, for instance another heading, then it will be displayed on a new line.

This is how block level elements work.

How to swap Inline and Block Level Elements

In most of the cases there is no need to swap inline and block level elements but there may be some situations where swapping them might become a necessity, for instance, when you want to display a list horizontally, converting the list element to an inline element becomes necessary.

For the purpose of converting inline elements to block level elements and vice versa, the display property of CSS is used.

Syntax
The following code snippets illustrates the display property.

  1. When you want to convert a block level element to an inline element.
    h1 {
      display: inline;
    }
  2. When you want to convert an inline element to a block level element.
    button {
      display: block;
    }
  3. If you want to remove an element then set the value of display property to none.
    i {
      display: none;
    }

Consider an example of an ordered list. An ordered list normally appears like the following and each item in the list consumes the entire horizontal space.

But when you change the list element from a block level element to an inline element, the list will be displayed horizontally.

The highlighted item from the list shows that the list element is converted to an inline element.

Conclusion

HTML elements are classified into two major groups which are; inline elements and block level elements. Inline elements consume only the required amount of space and do not start from a new line, for example elements like <span>, <a>, <img>, etc are inline elements. However, block level elements consume all the space available and start from a new line, for example elements like <ol>, <p>, <i>, etc are block level elements. Moreover, you can swap the state of these elements using the display property of CSS. This post discusses inline and block level elements and illustrates their difference with the help of suitable examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.