prevent line break spacing

Question

I'm having this site with a n number of tiles (the yellow elements in the picture). When the sites gets too small to put them on one line it obviously put them in a second row. But somehow it has this space between them. There are no spaces in between the elements in the source. Does anyone know how I can remove this space? I know I could use a table, but is there really no easier method?

The tiles (yellow) in their container (blue)

.container {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50%;
  background-color: rgba(66, 134, 244, .2);
  padding: 5px;
}

.item {
  height: 150px;
  width: 150px;
  display: inline-block;
  box-sizing: border-box;
  background-color: rgba(232, 223, 55, .2);
  box-sizing: border-box;
  border: 1px solid black;
}

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

Can't repro! http://jsbin.com/kirigohawu/edit?html,css,output and I see [this](https://i.stack.imgur.com/19yft.png) — Praveen Kumar Purushothaman, Jun 06 '18 at 10:01

score 0 · Accepted Answer · answered Jun 06 '18 at 10:03

The inline-block elements are causing you trouble. You can set font-size: 0px on the container, to get rid of the small margin:

.container {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 50%;
    background-color: rgba(66, 134, 244, .2);
    padding: 5px;
    font-size: 0px;
}

Updated fiddle

score -1 · Answer 2 · answered Jun 06 '18 at 09:58

-1

You can use in the CSS the margin-top method.

For example:

margin-top:-5px;

try to set different values untill the space between the elements will be removed.

answered Jun 06 '18 at 09:58

Omer Eli

23
6

That's not a really nice solution... – Tobias Geiselmann Jun 06 '18 at 10:03

prevent line break spacing

2 Answers2