inline-block vs block with pictures

Question

As you can see, I have a main div (id="main_div") which contains 2 divs id="logo" div which contain a link to a picture id = "intro" which contains only text

http://jsfiddle.net/omerbach/y7n2b/

 <div id="main_div">
      <div id="logo" class="headers">
        <a href="http://www.hawkaviation.com" target="_blank">
          <img src="http://www.badcomp.com/wp-content/uploads/2011/03/recommend-hawk.jpg"  alt="Hawk Aviation" />
       </a>
      </div>
      <div id = "intro" class="headers">
        PLACE YOUR ORDER NOW !!! 
      </div>
    </div>

inline-block

http://jsfiddle.net/omerbach/NneB6/

body {
    background : white;
}
#main_div {
    background:gray;
    border : solid 3px red;    
}
.headers {
    border : solid 1px black;    
    display : inline-block;
}

I have a couple of questions : When using inline, the picture is not in its surrounding div (you can see the black border) When using inline-block, the picture is in its surrounding div (you can see the black border)

I thought that the purpose of inline-block is a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.. I do not have any of those specified so i don't understand why inline-block should be used in my case.

Also regarding both examples, why does the seconds inner is aligned to the bottom of the first one?is that the default behavior ?

Thanks

Where is the inline-block in the second example? Also in the fiddle, have the body content in the top left, the style in the top right and make sure you choose the correct css style since it resets the CSS by default - like here: jsfiddle.net/mplungjan/SGCnS — mplungjan
thanks for the comments. inline block at jsfiddle.net/omerbach/NneB6 inline at jsfiddle.net/omerbach/y7n2b — omer bach
@mplungjan jsfiddle's "Normalised CSS" changes too many styles to be useful. Using jsfiddle without it is usually closer to what the average webpage has. — Mr Lister
I was mistaken that the Normalised CSS is default - they turned it off. And I agree with you, hence my comment — mplungjan

Mr Lister Mr Lister · Accepted Answer · 2013-06-27T10:22:35

The answer is yes: an inline-block element is still a block. Blocks have specific heights and widths and therefore, when you put a border around them, you know how large the border is going to be.

Inline elements on the other hand, don't have a constant width or height. Take this strong

  Lorem ipsum dolor <strong> sit amet, consectetur adipisicing elit, sed</strong>

that may look like it's one line high, but it may come out like this when your screen is narrow enough:

Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed

which an inline-block can't do. Now what is the height? Two lines? And the width? negative? Its end is to the left of its start!

In other words, you can't really tell. And neither can the browser. So if there's a large element in it, like the img in your example, the inline div won't grow to contain the whole the img; the img will simply overflow out of it.

Concluding, whether to use a block (inline or otherwise) or an actual inline element depends on your situation. Know what the differences are and how to handle them.

inline-block vs block with pictures

1 Answers