Hello curious stranger on the internet, you might have noticed that some HTML tags have some vertical spacing and show content on a new line while others show content on same line itself.
For example p tag shows text on a new line while span tag shows text on the same line.
The elements which start text on new line like p tag are called block level elements while elements like span which show text on same line are called as inline elements.
Let's understand some key properties of both of this types of elements:-
Block-level Elements:
- A block-level element always starts on a new line.
- A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
- A block level element has a top and a bottom margin usually.
- Examples:-
<div><h1>-<h6<p>
Inline elements:
- An inline element does not start on a new line.
- An inline element only takes up as much width as necessary.
- Examples:-
<a><span><i>
Demo of elements on codepen:-