HTML块元素和CSS显示块属性之间的区别

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 (ie 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 .