Why does adding a span to an inline-block div change it's layout?

Question

I have a bunch of dynamically generated html (See Fiddle) that basically puts some ugly buttons on an ugly calculator in a grid, but when I try to replace an image with text in a span, the button moves down.

I'm not asking for a critique of the colors, but if someone could help me with the styling re:the alignment, that would be awesome.

Basically

<div><span>Text</span></div>

or

<div><div>Text</div></div>

appears 50% lower than:

<div><img src="url.jpg" /></div>

whereas:

<div>Text</div>

appears slightly above the image buttons in the grid if I don't mess with the font size, but:

<div style="font-size: 12px">Text</div>

moves it right back down to where the span had it.

The issue seems to occur independent of my javascript, as the attached fiddle has the same problem and no js in it (just the generated html and included css).

So yeah, any help other than, it's ugly?

Note: I chose display: inline-block intentionally for the buttons, to provide the autowrapping in the parent container. I'd prefer not to go to a position:fixed or position:absolute if that messes with the wrap around.

Answer 1

The alignment issue you're having is the expected result of using display: inline-block on your .button elements. Using inline-block elements basically makes the element act like a block element, but its bottom aligns as an inline element would. Take this for example:

<p>example example example <img src="something.jpg" /></p>

Which renders like this:

The image is inline with the paragraph. Notice that the bottom of the image aligns with the bottom of the text. This same thing is happening in your Fiddle – the bottom of the span text aligns with the bottom of the images (once you remove the relative positioning). You have inline elements inside inline-block elements, so the bottom alignment is naturally behaving like it would on inline elements.

Inline-block elements are extremely useful, but probably not in this scenario, where you have several distinct buttons, which are in themselves distinct elements. I would suggest doing this:

.button {
     border: 1px outset;
     background-color: #FACC43;
     color: darkgreen;
     display: block;
     margin : 10px;
     margin-right : 0px;
     margin-bottom: 0px;
     float:left;}

Make the buttons block elements by using display: block and float:left. They'll behave much more predictably as elements that are 30px x 30px on a common alignment.

If for whatever reason your really want to use inline-block, apply vertical-alignment: bottom to the .button style you currently have.

Both solutions I gave you will result in this: