Block level and Inline elements in CSS

There are two types of elements mainly in the html, they are

• Block level.
• Inline

What are block level elements ?

Generally the elements which stack vertically downwards one after the other are called block level elements. 

Example : Div tags, P tags etc.

When you write a block level element the next elements will be stacked below the previous element. We can change the default behaviour of those elements using the css properties. Let's consider the below example.

html 

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

<div class="box">Box 4</div>

<div class="box">Box 5</div>

Now, when we see the result in our browser these boxes will stacked down one after other vertically. Let's apply CSS to it.

css

.box {

   display: inline-block;

}

After applying above property to the elements, those boxes now stacked horizontally.

What are Inline elements ?

The elements that are horizontally stacked and appear in the same line are called inline elements.

Example: Span tags, Img tags, anchor tags etc.

When you write an inline element if next element is also inline then both elements stack horizontally. But, if the next element is block level then it will be in the next line.