SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    space below inline elements inside a block element

    Code:
    <div class="cont"><span class="inn">inline content</span></div>
    Code:
    .cont{
    	border: 2px solid #F00;
    }
    .inn{
    	background-color: #999;
    }
    Inline elements are placed inside a block element.
    Inline element is given a background color & block element is given a border.

    There's a space of about 1px at the bottom of inline element. Why is this so?

    When inline element is given display:inline-block or display:block the space disappears.

    I thought this was the standards mode - almost standards mode stuff.

    But this space is present in Almost Standards mode & Quirks mode also.
    This space is not present in IE6.
    1.jpg
    What's the reason for this space at bottom?

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My understanding is that this is related to the vertical-align property. The space also disappears if you set vertical-align to "bottom".

    The default vertical-align for inline elements is baseline, which is (I guess) not quite bottom...
    I'm the web overlord for Graphic Business Systems

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    This is because of the inline formatting model. Line-height and/or vertical align can be a lot of help in this situation.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also thought that this was related to vertical-align of inline elements.

    But no, the space is still present with vertical-align:bottom.

    The background-color of the inline element covers the descender space of characters like j, p, q etc.
    The space is below the characters.

    I'll update the code & attachment with these characters

    Update
    Couldn't edit the question. Code with descender characters & vertical-align: bottom:
    Code:
    <div class="cont"><span class="inn">inline content y p q</span></div>
    Code:
    .cont{
    	border: 2px solid #F00;
    }
    .inn{
    	background-color: #999; vertical-align: bottom;
    }
    Attached Images Attached Images

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The space is still present when using line-height.

    As the line-height is increased for the inline-element, space is appearing at both top & bottom.

    Code:
    .inn{
    	background-color: #999; line-height: 40px;
    }
    Attached Images Attached Images

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There is a default line-height on the body element, so perhaps if you remove that (or reset it to 1) you'll remove the gaps:

    Code:
    body {font: 100%/2 arial, sans-serif;}

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks all,

    Setting line-height: 1; on the parent block element removed the space.

    There was a small side-effect. The background of inner inline element overlapped the border of outer block element.
    Applying top & bottom padding on the outer block element fixed this.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You should read the details of the inline formatting model as it is a very complicated subject. I;ve read it a 100 times and it still confuses me

    Your main mistake is thinking that the background and/or vertical alignment of the inline element will have any effect of the block level parent that surrounds it. Backgrounds on inline elements cover the "content area" of an inline element (which is not the same as the content area of a block box) and does not equate to the full space that the inline element takes up. Also vertical padding on inline elements will increase the height of the inline element but have no effect to the surrounding area except maybe to bleed over other lines and vertical margins are completely ignored.

    It is possible in a lot of cases to achieve the effect you want by controlling line-height and font-size (and padding on parents if borders are used on the parent) to control specific instances to produce the effect you want but that effect may be lost should a user resize the text or should you use an odd pixel size.

    Suffice to say that backgrounds on inline elements are only useful for highlighting odd words in a sentence and not for creating block level button effects where height is critical.

    If you want perfect control then make the inline element a block element or float it.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul

    Backgrounds on inline elements cover the "content area" of an inline element (which is not the same as the content area of a block box) and does not equate to the full space that the inline element takes up.
    this is a very good point.

    details of the inline formatting model - i didn't even reach half the article & my head was spinning.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •