Hello, curious student 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 the same line itself.
For example, p tag shows text on a new line while the span tag shows text on the same line.
The elements which start text on a new line like the p tag are called block-level elements while elements like span which show text on the same line are called inline elements.
Let’s understand some key properties of both of these 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:-