How to put divs in a row with "display: inline-block", without a margin?

Question

Whenever I put divs in a horizontal row using display:inline-block, there's always a margin between them, even if I set margin: 0 !important. Is there a way to have exactly 0 pixels between the divs?

Here's a basic example where I have three black boxes that should be continuous, but there's white space between them: (Fiddle)

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
}

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

https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Nenad Vracar, Aug 03 '17 at 10:06
There is different way to fix that, check this link, that should help : https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Victor Allegret, Aug 03 '17 at 10:06

score 4 · Accepted Answer · answered Aug 03 '17 at 10:05

4

It is because of the new line between the elements. You could comment it like I did, or make those elements inline with each other

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
}

<div class="div"></div><!--
--><div class="div"></div><!--
--><div class="div"></div>

answered Aug 03 '17 at 10:05

Carl Binalla

5,393
5
27
46

1

Woooooooow. I never ever would have thought that. That's crazy. Thanks! – Joe Morano Aug 03 '17 at 16:13

Gleb Kostyunin · Answer 2 · 2017-08-03T10:16:56.130

2

You should give the font-size: 0 to the parent container. The font size is giving those small margins to the inline blocks.

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
}
.container {
  font-size: 0;
}

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

edited Aug 03 '17 at 10:16

answered Aug 03 '17 at 10:04

Gleb Kostyunin

3,743
2
19
36

Are you sure? I tried it: https://jsfiddle.net/ketrb1ac/2/ – Joe Morano Aug 03 '17 at 10:05
Yep: https://jsfiddle.net/xooL3drg/ – Gleb Kostyunin Aug 03 '17 at 10:06
@Swellar, thanks, done :) – Gleb Kostyunin Aug 03 '17 at 10:17

Nick De Jaeger · Answer 3 · 2017-08-03T10:10:59.497

1

.divlist {
  position: relative;
  font-size: 0;
}
.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  font-size: 16px;
}

<div class="divlist">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

edited Aug 03 '17 at 10:10

answered Aug 03 '17 at 10:05

Nick De Jaeger

1,247
10
13

score 0 · Answer 4 · answered Aug 03 '17 at 10:06

Better have outer div and add style font size 0

Eg:

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
  font-size: 14px;
  color:#fff;
  text-align:center;
}
.main-div {
  font-size:0;
}

<div class="main-div">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</div>

score 0 · Answer 5 · answered Aug 03 '17 at 10:08

0

Use display: table-cell;

.div {
  position: relative;
  display: table-cell;
  background: black;
  width: 100px;
  height: 100px;
}

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

answered Aug 03 '17 at 10:08

vishnu

2,848
3
30
55

score 0 · Answer 6 · answered Aug 03 '17 at 10:17

I know this isn't the cleanest solution, but here's how I do it :

.div {
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  white-space: nowrap;
  overflow: hidden;
  margin-right : -0.25em;
}

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

The inline-block undesirable margin is well known and you'll find other solutions here

score -1 · Answer 7 · answered Aug 03 '17 at 10:07

-1

As Gleb said, put the font-size:0; on the container. You could put the container in display: inline-flex; or display: flex; too.

answered Aug 03 '17 at 10:07

Chaaampy

243
1
10

Gerard · Answer 8 · 2017-08-03T11:01:14.580

-2

I added a wrapper defined as flexbox.

.wrapper {
  display: inline-flex;
}

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
}

<div class="wrapper">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

edited Aug 03 '17 at 11:01

answered Aug 03 '17 at 10:05

Gerard

15,418
5
30
52

1

Flex items are blockified, so they no longer have a display value of `inline-block` – Alohci Aug 03 '17 at 10:43
Good point. I changed it to inline-flex – Gerard Aug 03 '17 at 11:01
Note that making the wrapper inline-flex doesn't help. Inline-flex elements are still flex containers, the children of flex containers are flex items, and flex items are blockified. – Alohci Aug 03 '17 at 12:53

How to put divs in a row with "display: inline-block", without a margin?

8 Answers8