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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • aredz
    New Member
    • Aug 2010
    • 6

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

    Hi,

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

    from this code:

    CSS:
    Code:
    div.baselineRule{ background: url(SHipuha.jpg) repeat-x scroll left bottom transparent; display:inline-block; }
    HTML:
    Code:
    <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
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    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.

    Comment

    • aredz
      New Member
      • Aug 2010
      • 6

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

      Comment

      • ytes2018
        New Member
        • Oct 2018
        • 1

        #4
        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

        Comment

        Working...