SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: inline-block

  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline-block

    Can someone please explain to me how display: inline-block; is meant to render. I tried some google searches but no luck finding a good explanation of it. Thanks.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this page on Sitepoint's CSS reference.

    Louis

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, I might be following.... The SitePoint CSS Reference definition says:

    "inline-block makes the element generate a block box that’s laid out as if it were an inline box."

    So, an element with display: inline-block; will display as a block without line breaks above and below the element? What benefits does this create?

  4. #4
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tictike View Post
    So, an element with display: inline-block; will display as a block without line breaks above and below the element? What benefits does this create?
    Inline-block elements will accept values for height and vertical margin/padding, which normal inline elements do not.

    By default, <img> elements render as inline-block. That is likely how inline-block is most often used.

  5. #5
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I'm getting it..slowly. But in that case shouldn't the markup below create an a element that is 100 x 100?

    <p>text <a href="#" class="inlineblock">text here</a> text</p>

    a.inlineblock{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
    }

  6. #6
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should in a browser that supports changing the display to inline-block, but not all do. I don't know which browsers do and don't though.

  7. #7
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure IE does, but my example didn't work. I also tested in FF.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfectly in Opera 9.51, although that particular example doesn't look very useful.

    The benefit of inline blocks is that they behave as block boxes on the inside. Thus it allows you to place 'block' boxes next to one another without using floats.

    Code HTML4Strict:
    <div class="cols">
      <div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc commodo lorem ut justo.</p>
      </div>
      <div>
        <p>Ut molestie libero quis massa elementum tristique. Aliquam erat volutpat.</p>
      </div>
      <div>
        <p>Duis purus diam, gravida et, mattis eget, semper ac, tellus. Suspendisse velit nunc, varius ut, pharetra malesuada, suscipit ut, lacus.</p>
      </div>
    </div>

    Code CSS:
    .cols div {
      display:inline-block;
      width:12em;
      margin-right:1em;
      padding:0.5em;
      border:1px solid #009;
    }
    Birnam wood is come to Dunsinane

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Inline-block doesn't work properly in IE. It works on elements that are inline by default but not on block elements. However by applying "haslayout" to a block level element and then in another style block setting the same element to display:inline then IE makes the element behave as though it was inline-block.

    It's hard to tell if IE really understands inline-block or not as the behaviour can be triggered without actually using the property inline-block at all. It just happens that inline-block is also a trigger for "haslayout" and therefore just confuses the issue even further.

    Firefox 3 understands display:inline-block but FF2 and under don't. However you can use a vendor Specific Extension for moz and give it the inline-block functionality.

    Building on the code Tommy provided above here is an example that works in Firefox, Opera, Safari and IE.

    http://www.pmob.co.uk/temp/inline-block-example2.htm

    The benefits of inline-block are that unlike floats you can center the elements simply by using text-align:center on the parent. You can also align them vertically using the vertical-align property.

    Inline-block is perhaps one of the most useful properties that sadly until now wasn't implemented in most browsers.


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
  •