Inline-block vs. Block Elements
In this article, we will discuss the differences between inline-block and block elements. These elements are used widely every day while designing a website. People normally get confused between these elements. So let’s understand the differences to avoid such confusion.
Block Elements
The elements that begin on a new line are known as block elements. A block element takes up the full width of the content. Unlike inline, there exists a top and bottom margin for these elements. Block-level elements may only appear inside the body tag. Block-level elements create a larger structure than inline elements.
Example of Block elements:
<div>, <p>, <li>, <main>, <nav>, <ul>, <form>, <video>, <table>, <aside>, <article> are some of the inline tags.
Example:
Output:
Inline-Block Elements
The display value of inline-block works similarly to inline with one exception: the height and width of that element become modifiable.
Example:
Output:
Differences between Block and Inline-block
Block | Inline-block |
---|---|
A block element begins on a new line. | It remains inline with all the text around the element and appears the same as inline. |
Examples: div, p, li, main, etc. | It has no tag examples as it can be applied to any tag using CSS. |
CSS property: display:block | CSS property: display:inline-block |
Here is the output file using all the elements on one page:
The code of the above web page: