inline-block how to remove gap

Question

I want to to display two divs inline, one div is 25% and the other 75%, when I use:

display: inline-block;

It seems to generate gaps in between the two divs, which obviously knocks the 75% div down.

How do I remove the gap? I used:

vertical-align: top;

This has removed the top gap... Now just the side gap needs to go.

See here jsfiddle.

score 7 · Accepted Answer · edited May 23 '17 at 12:15

7

The problem is that you have a white space between your two div elements, and because they are of inline-block display, it renders just like a space between two letters in a regular text.

The solution is using a negative word-spacing on the container:

word-spacing: -1em;

jsFiddle Demo

See more here: Fighting the Space Between Inline Block Elements

Also here display: inline-block extra margin

edited May 23 '17 at 12:15

Community

1
1

answered Aug 22 '13 at 14:56

Itay

16,601
2
51
72

Great solution, concise answer as always. – kunalbhat Aug 22 '13 at 15:45
Never knew that - thanks! – ConorLuddy Aug 23 '13 at 16:29

score 1 · Answer 2 · answered Aug 22 '13 at 14:56

It's because of the whitespace between your divs in the HTML.. Make it like this:

<div class="grid_one">

</div><div class="grid_two">

</div>

http://jsfiddle.net/npP3p/1/

Or, use float:left;, but remember to clear the floating after that or give the container a height..

score 0 · Answer 3 · answered Aug 22 '13 at 14:57

0

Just add float:left; to first class.

Fiddle

answered Aug 22 '13 at 14:57

majorhavoc

2,385
1
24
26

score 0 · Answer 4 · answered Aug 22 '13 at 14:59

0

Tim is correct, its the whitespace that creates the margin.

Another solution to it is to add a margin-right: -4px to .grid_one, check the updated fiddle.

answered Aug 22 '13 at 14:59

GreyRoofPigeon

17,833
4
36
59

score -1 · Answer 5 · answered Aug 22 '13 at 14:57

-1

Float left was the precious gem you were missing

Float:left;

http://jsfiddle.net/npP3p/2/

answered Aug 22 '13 at 14:57

srijan

1,504
1
13
24

score -1 · Answer 6 · answered Aug 22 '13 at 14:57

-1

Why not float: left; the divs?

answered Aug 22 '13 at 14:57

kunalbhat

1,709
10
11

If you're going to downvote, please provide a comment of clarification on why. – kunalbhat Aug 22 '13 at 15:16
@Itay was that you again?! :) – kunalbhat Aug 22 '13 at 15:17
I don't down vote working solutions :) – Itay Aug 22 '13 at 15:38
@Itay Haha, it's just nice to see a familiar face around here. I'm just playin', have a good one! – kunalbhat Aug 22 '13 at 15:45
Just to make it clear, it's not my real face :) – Itay Aug 22 '13 at 15:46

inline-block how to remove gap

6 Answers6