CSS Inline-block Dimension Discrepancies

Question

I've got the follow HTML code:

<section class="container">
    <div class="search"></div>
</section>

And these CSS rules:

*, *:before, *:after {
    box-sizing: border-box;
}

body, section, div {
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

.container {
    display: inline-block;
    position: relative;
}

.search {
    display: inline-block;
    padding: 3em;
    border: 1px solid black;
}

If you inspect the section element, you'll see that it has 5px of size... I didn't establish the size. I leave that the browser calculates this automatically with the child's size.

Why this behavior?

@MaratTanalin I want to know why occurs this behavior =/ Not fix it — leoMestizo, Jun 28 '13 at 01:04

Shrey Gupta · Accepted Answer · 2013-08-18T19:40:25.750

The reason is because of the inline-block that you are using for the container and search elements. The idea is that inline-block treats the elements as text in a paragraph; that is inline. So while the elements themselves are block elements, the browser adds some space between the elements because of the whitespace you actually have in your HTML. Just like how adding spaces in a p tag puts spaces between words, adding whitespace between two inline-block elements put spaces between the elements.

That being said, there are a few ways to fix this:

Minimize the HTML. Possibly the simplest way. Instead of having white space in the code, just force everything to one line, like this: <section class="container"><div class="search"></div></section>. (Warning: this is untested.)
Add negative margins: This is a bit of a hack, but you can find out how much space is being added by using the inspect element powers of your browser, than make that your negative margin. That is, if there is 4px of space between your two elements, then apply the following: margin:-4px;. (By default, the browser will apply 4px of margin space between inline-block elements.) If you use em or a percentage, this could work with responsive designs.
Use something else. If you're trying to vertical-align, then inline-block is not always the way to go. Here's a good resource for that: http://phrogz.net/css/vertical-align/.

Glad it helped! By the way, I just tried your case in a JSFiddle. If you're looking for a quick fix, option 2 works best. — Shrey Gupta, Jun 28 '13 at 01:39
I'd avoid option 2 if possible, as it depends on font metrics, which may not be consistent across platforms. — kibibu, Jun 28 '13 at 01:52

score 3 · Answer 2 · edited May 23 '17 at 11:59

3

Here's more information about it.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

display: inline-block extra margin

edited May 23 '17 at 11:59

Community

1
1

answered Jun 28 '13 at 01:22

Zama Mohammed

339
4
15

CSS Inline-block Dimension Discrepancies

2 Answers2

Linked