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.
- When you want to convert a block level element to an inline element.
h1 {
display: inline;
} - When you want to convert an inline element to a block level element.
button {
display: block;
} - 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.
