DIV is an "inline" Element - Part 1

What if I say, DIV is not a block-level element, and it is an inline element.

Okay, This is how even I reacted when I heard it first. If you don't believe, let us have a look here.

The HTML File looks pretty straight forward. The CSS too. But the magic is here.

div{ all: initial; }

What is initial Property?

As per MDN, the definition goes like,

Before understanding initial property, let us answer this question "Do We Really Understand CSS Inheritance?"

CSS Inheritance

Live Demo in Vercel - CSS Inheritance Every section has a video snippet from the Inspect Element which shows how exactly each property works behind the screen.

The three tiers of CSS

In order to understand how these properties works, we need to know that CSS works has three different tiers, and they work in a way inheriting and overriding each other

• Base Initial Styles (The Formal Definition)
• Browser Specific (Over Rides Base)
• Custom styles (Over Rides Browser)

Property: initial

In the Demo, we have 2 Kinds of div

• The div with the id set as default has its property set to default

• The div with the class set as one and two has its property set to initial

Property: inherit

In the Demo, we have 3 main block of div

• The content of div with the class name withInheritOne has a font-size set to 16px and also affects the p tag inside it as, by default the formal definition of font-sizeproperty is inherit.

• The content of div with the class name withoutInherit has a border property and it doesnt affects the p tag inside it, as by default the formal definition of borderproperty cannot be inherited until explicitly mentioned.

• The content of div with the class name withInheritTwo has a border property and it does affects the p tag inside it, as we have explicitly mentioned inherit to the p tag.