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.
2 Answers
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;
Comments
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.
display: blockas default styles. Nothing more. We can say thatspanwithdisplay: blockis the same asdiv(both with zero semantic value).display:blockon block level elements unless the property is being reverted to that state after being changed previously.