Difference between a block-level element and an inline element?

Naresh Beniwal

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Inline Elements	Block Elements
Inline elements occupy only sufficient width required.	Block Elements occupy the full width irrespective of their sufficiency.
Inline elements don’t start in a new line.	Block elements always start in a line.
Inline elements allow other inline elements to sit behind.	Block elements doesn’t allow other elements to sit behind
Inline elements don’t have top and bottom margin	Block elements have top and bottom margin.

Brahma Prakash Shukla3y ago
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur.
+2
Onkar Sharma3y ago
Hi Naresh,

Here is the definition of both HTML elements:

Block-level Elements: A block-level element always starts on a new line and takes up the full width available. For example,
and

Inline Elements: An inline element does not start on a new line and occupies as much space as is necessary. For example,

And, to know more about them, visit:

https://www.w3schools.com/html/html_blocks.asp

https://www.geeksforgeeks.org/difference-between-block-elements-and-inline-elements/

Thanks!
+3
Sachin Singh3y ago
Block level elements are those which covers the whole width meaning will always come below / above any other element and never be side by side ex:- h2,h1

However inline elements will come inline meaning side by side. ex:- Span
+3