display: inline-block extra margin

Question

I'm working with a few divs that are set to display: inline-block and have a set height and width. In the HTML, if there is a line break after each div there is an automatic 5px margin add to the right and bottom of the div.

Example:

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

Is there a property that I've overlooked that will allow me to reset the automatic margin?

Update

From what I've found there is no way to remove the margin... except if you either have everything on the same line or, add comments to comment out the line breaks. example:

<div>Some Text</div><!--
--><div>Some Text</div>

Not the best solution, but still easier to read if you have multiple lines.

Its not extra margin in any way. The blocks are treated as inline content and get word related CSS applied. word-spacing (each block is a word) and font-size is applied to white space between each block. — Darwin, May 04 '12 at 08:49
Some nice tricks which have not been mentioned: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — John Magnolia, Oct 25 '12 at 16:07
What's a good way to get rid of the bottom whitespace? If the inline-block divs are between two normal divs. — Costa Michailidis, May 09 '14 at 19:09
I cannot understand why this is programmed like that. It is obvious to me there shouldn't be any space between inline elements... — zyrup, Sep 26 '18 at 02:17
faced this task and my aproach this margin:-1px -4px 0 -1px; — Sultan Zhumatayev, May 29 '20 at 16:50

score 133 · Answer 1 · edited May 05 '21 at 11:15

133

White space affects inline elements.

This should not come as a surprise. We see it every day with span, strong and other inline elements. Set the font size to zero to remove the extra margin.

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

The example would then look like this.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

A jsfiddle version of this. http://jsfiddle.net/QtDGJ/1/

edited May 05 '21 at 11:15

Mario Petrovic

7,500
14
42
62

answered Nov 24 '11 at 21:30

Darwin

4,686
2
30
22

Works very well. Note that if you're using `letter-spacing` or `word-spacing` you need to set them to `0` as well for this technique to work. – djanowski Jan 04 '12 at 01:37
1

So true! But you only have to set them if you are not using a `em` value. – Darwin Jan 17 '12 at 08:33
1

Setting `letter-spacing`, `word-spacing`, and `font-size` to `0` fixed the horizontal margin issue for me. – Josh Apr 09 '12 at 14:15
+1 - Tried Daniels solution and it worked fine in firefox, but not in safari or chrome, but setting the font-size to 0 did the trick in all three browsers. – Cyclonecode Oct 19 '12 at 10:06
this is the best solution – Cory Danielson Feb 20 '13 at 23:57
this one really solves my problem, thanks! – Rafael Berro Feb 24 '18 at 05:30
This one is the perfect answer – Pandurang Patil Feb 25 '20 at 14:19

score 119 · Accepted Answer · edited Jan 23 '13 at 10:48

119

The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1; on the surrounding container.

edited Jan 23 '13 at 10:48

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2,754
1
26
39

answered Aug 31 '10 at 13:00

Daniel

1,798
1
13
12

wow.. I never even thought to give it negative spacing! – mike Aug 31 '10 at 14:01
Setting word-spacing to 0 worked for me. The only frustrating thing is that word-spacing is inherited, so it has to be explicitly redefined for child elements. – Jo Sprague Oct 04 '10 at 15:28
3

In Safari, word-spacing: 0 fixes the spacing but word-spacing: -1em does not. Firefox is the opposite. I'd remove the whitespace between the elements in the html code if possible. Don't yet know what IE7 does... – coltraneofmars Dec 15 '10 at 19:57
22

The alternative is to use float:left on all the elements and set the container to overflow:auto to clear it – bcoughlan Apr 04 '11 at 18:41
5

The word-spacing trick may work for fixing the _horizontal_ extra margin, but it does not fix (in any browser that i've tried) the _vertical_ margin between two inline-block elements that are on separate lines, one below the other. Is there a similar fix for that? – matteo Nov 12 '11 at 13:39
Here is an example using much of what was described in this question: https://gist.github.com/1819068 – shiftins Feb 13 '12 at 18:57
1

@matteo have a look at this jsfiddle to see a working examlpe of what you need. http://jsfiddle.net/QtDGJ/1/ – Darwin May 04 '12 at 08:45
1

+1 This answer helped me alot. I was scratching my head and smashing my keyboard against the wall=) – Cyclonecode Oct 19 '12 at 09:29
http://stackoverflow.com/a/8226956/2122073 ul{ letter-spacing :-4px; /*Remove the letter spacing*/ } li{ display:inline-block; letter-spacing :0px; /*Put back the letter spacing*/ } – jason weng Jul 20 '14 at 09:51
I always use `font-size: 0` on the outer container then set the right font size on the target element - works like a charm. – Sebastian Sulinski Aug 29 '15 at 20:13
Used margin-bottom: -1%; and it worked – tshoemake Dec 12 '15 at 05:25
`display: inline-flex;` might be another option worth trying. – JohnnyBizzle Mar 03 '18 at 15:18

Ben · Answer 3 · 2012-04-15T12:23:41.120

66

A year later, stumbled across this question for a inline LI problem, but have found a great solution that may apply here.

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

vertical-align:bottom on all my LI elements fixed my "extra margin" problem in all browsers.

edited Apr 15 '12 at 12:23

answered Nov 22 '10 at 08:43

Ben

54,723
49
178
224

Found my own solution, a year later, but didn't work on my current issue. Please note this is apparently specific to the problem. – Ben Sep 17 '11 at 13:43
Thanks! this resolves my specific problem with `p#myid { display: inline-block }` – 3oheme Sep 19 '11 at 09:04
3

I found that mozilla ff and chrome has different defaults or at least render it differently until you specify vertical-align.. so it's better always specify it explicitly. – pronebird Sep 23 '11 at 14:37
1

Thank you! That is the only thing so far that helped me to solve that without ruining the flow! – Ilia Andrienko Jan 26 '14 at 15:49
This worked for my div elements too. Thank you, headache over! – Rupert Oct 09 '14 at 12:48
Zerquix18 and Frubear - glad to help :) – Ben Oct 09 '14 at 15:28
Worked for me aswell in IE9, FF and Chrome – MisterBla Nov 29 '14 at 02:33
Works like a charm for vertical inline blocks. – witzawitz Mar 24 '15 at 11:44
this was a nice one! thanks! – Simon Aug 10 '16 at 16:14
i love you, we should meet someday :D – Muhammad Omer Aslam Aug 01 '19 at 00:51

score 25 · Answer 4 · answered Apr 30 '14 at 15:07

25

font-size: 0 to parent container

(Source: https://twitter.com/garand/status/183253526313566208)

answered Apr 30 '14 at 15:07

optimiertes

4,002
1
22
15

2

this is genius...browser testing will tell – Scott Joudry May 07 '14 at 20:30
fyi: This works at least on Chrome, FF and Safari on OS X – 23tux Aug 16 '16 at 13:55
this is the correct answer as the extra "margin" has to do with text properties – Julz Jan 14 '18 at 23:52
1

won't be useful if any text is involved. – aderchox Jul 30 '21 at 08:32
@aderchox why? you can style the children back to font-size: initial; – optimiertes Dec 27 '22 at 19:56

score 10 · Answer 5 · edited May 05 '21 at 11:16

10

Cleaner way to remove those spaces is by using float: left; :

DEMO

HTML:

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

CSS:

div {
    background-color: red;
    float: left;
}

I'ts supported in all new browsers. Never got it why back when IE ruled lot's of developers didn't make sue their site works well on firefox/chrome, but today, when IE is down to 14.3 %. anyways, didn't have many issues in IE-9 even thought it's not supported, for example the above demo works fine.

edited May 05 '21 at 11:16

Mario Petrovic

7,500
14
42
62

answered Feb 17 '13 at 11:19

Kuf

17,318
6
67
91

5

there are lots of other issues with floating and this question pertains to inline-block not an alternative solution – Cory Danielson Feb 20 '13 at 23:58
Back in '09 i would have agreed with you, but modern browsers do support this. just try and open the [Demo](http://jsfiddle.net/MekEt/) and see for yourself. – Kuf Feb 21 '13 at 10:27
4

you're still dealing with floats and going to have clearing issues. and this question is still not about floats. it's about inline-block – Cory Danielson Feb 21 '13 at 18:00
`inline-block` > `float`, for most cases, imo. Floats have nothing to do with modern browsers. Even IE6 (and older) handled floats fine. (Even if there are a bit fewer bugs now.) – Qtax Oct 29 '14 at 16:35

score 7 · Answer 6 · edited May 05 '21 at 11:15

7

You can get a vertical space even though you have NO WHITESPACE whatsoever between your inline-block elements.

For me, this was caused by line-height. The simple fix was:

div.container {
    line-height: 0;
}
div.container > * {
    line-height: normal;
}

edited May 05 '21 at 11:15

Mario Petrovic

7,500
14
42
62

answered Feb 20 '14 at 07:02

chowey

9,138
6
54
84

score 3 · Answer 7 · answered Jul 22 '10 at 21:33

3

For the record, that margin and padding resetting didn't do the trick for me, but this quote from one of the comments above turned out to be crucial and solved the issue for me: "If i put the divs on the same line it margin disappears."

answered Jul 22 '10 at 21:33

Enchilada

3,859
1
36
69

score 2 · Answer 8 · answered Nov 09 '12 at 11:15

2

There are a number of workarounds for this issue which involve word-spacing or font size but this article suggests removing the margin with a right margin of -4px;

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

answered Nov 09 '12 at 11:15

pixelator

689
1
7
12

score 1 · Answer 9 · answered Apr 10 '13 at 07:52

After struggling with this issue too many times I found a very elegant solution in HTML 5. In HTML 5 you should not close several (li,p,etc) tags; the ambition to become XML is forever gone. For example, the preferred way to do a list is:

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

Browsers MUST close the LI and they must do this without introducing whitespace, solving this problem. If you still have the XML mindset it feels wrong but once you get over that it saves many a nightmare. And this is not a hack since it relies on the wording of the HTML 5 spec. Better, since not closing tags is pervasive I expect no compatibility issues (not tested though). Bonus is that HTML formatters handle this well.

A little worked out example: http://cssdesk.com/Ls7fK

You are right. It works. Thank you so much. – arjun sah Nov 05 '20 at 14:37 — arjun sah, Nov 05 '20 at 14:37

score 0 · Answer 10 · answered Dec 02 '09 at 16:21

0

Can you post a link to the HTML in question?

Ultimately you should be able to do:

div {
    margin:0;
    padding: 0;
}

to remove the spacing. Is this just in one particular browser or all of them?

answered Dec 02 '09 at 16:21

Jeepstone

2,591
5
22
38

no link to it right now... but yeah, i have a reset(*) that sets margin and padding to 0. Seems to be a cross browser issue. Not one browser does it correctly.... If i put the divs on the same line it margin disappears. I can do it that way but i'm extremely anal about clean html! and... I sometimes use inline-block for my ul navigations and i can never get that margin to disappear. thanks;) – mike Dec 02 '09 at 16:33
update... with all of them(8 divs 2 rows of 4) on the same line, the bottom margin is ignored.... its super strange. code looks like: * { margin: 0; padding: 0; } div { margin: 0 10px 10px 0; }
Some Text
Some Text
– mike Dec 02 '09 at 16:42
– mike Dec 11 '09 at 02:04

score 0 · Answer 11 · answered Oct 19 '14 at 17:05

Another solution to this is to use an HTML minifier. This works best with a Grunt build process, where the HTML can be minified on the fly.

The extra linebreaks and whitespace are removed, which solves the margin problem neatly, and lets you write markup however you like in the IDE (no </li><li>).

score 0 · Answer 12 · answered Jan 27 '15 at 05:17

0

I encountered the same problem. What caused it for me were a bunch of whitespaces ( ) that I inserted. After removing them, the problem was solved.

answered Jan 27 '15 at 05:17

JMS

1,039
4
12
20

display: inline-block extra margin

12 Answers12

DEMO

Linked

Related