Default Height value for empty <span> & <div> tags

[aredz]

Hi,

I would like to ask about the default value of Height for an empty <span> or <div> tag.

from this code:

CSS:

div.baselineRule{ background: url(SHipuha.jpg) repeat-x scroll left bottom transparent; display:inline-block; }
 

HTML:

<div class="baselineRule" style="width:70px"></div>
 

for the code above,I understand that the image wont be displayed if I don't add:
1. a height value for the CSS. like height="1px"
2. add a content on the div. <div>aaaaa</div>

Is the default height for <DIV> and <SPAN> really 0px?

I just want a clear explanation, about why you should set either of the solutions above for this to work.

Is there a W3C rule or something that would explain why this is happening? Could you please provide me a link?

Any help is greatly appreciated.

Thanks!

[drhowarddrfine]

Div and span elements are for structure and not presentation. They don't have any height or width by default for that reason and will collapse to zero with no content unless you set the height or width.

[aredz]

Thank you so much for the provided link and explanation Mr. drhowarddrfine. I really appreciate it :)

[ytes2018]

The answer is not correct. The empty div can have height and width if you set. If not set, the width would be the width of its parent, and the height would be zero. For details, you can refer to https://myprogrammingnotes.com/defau...y-div-css.html