Difference between HTML block elements and CSS display block property

Question

May I know if there is any difference between HTML block elements (Eg. <p>, <div>,...) and CSS property display: block?

Since from what I have read they are the same, but why we still need to use display: block for some block level element.

Answer 1

What you call "HTML block elements" are elements who have their display property set to block so there is no difference between a <div> and a <span> with display:block;.

This display property is set by the user agent stylesheet (i.e your browser). You can view these properties in chrome dev tool under "user agent stylesheet".

The only reason I see of using display:block; for a div element is :

• your target adience is using some obscur user agent that don't follow web stadards (very unlikely)
• you need to override a previous CSS declaration like display:none;

Answer 2

There is no difference between... because block elements already have default css property display: block.

But we use display: block to show them again, when we hide/remove them from page using display: none.