Javatpoint Logo
Javatpoint Logo

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 vs. Block Elements

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:

Inline-block vs. Block Elements

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:

Inline-block vs. Block Elements

The code of the above web page:


Next TopicDifference between




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA