Spacing Between Inline-block Divs, Can't Solve By Removing Whitespace

I know this question has been asked on SO before, and the answer is usually to remove any spaces between the markup. In this case, I can't, since I'm programatically printing out d

Solution 1:

You could ty using a negative margin on the inline-block items. Take a look at this jsFiddle

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  margin: 0 -2px;
  padding: 10px;
}

Solution 2:

Edit: What if you changed the container display to flex?

.container {
  display: flex;
  align-content: center;
  justify-content: center;
} 

http://jsfiddle.net/toodgqmm/2

Solution 3:

Simply you can use negative margin value like this below:

.col-center {
  display: inline-block;
  border: 1px solid blue;
  text-align: left;
  float: none;
  margin-left:-2.5px;
  margin-right:-2.5px;
}

Solution 4:

Let Bootstrap do its thing. I'd recommend checking how many elements there are on a line, from within your code (JS). If two elements they code out as

<divclass="col-xs-6 col-center">b</div><divclass="col-xs-6 col-center">d</div>

if you have four elements they code out as

<divclass="col-xs-3 col-center">b</div><divclass="col-xs-3 col-center">d</div><divclass="col-xs-3 col-center">b</div><divclass="col-xs-3 col-center">d</div>

etc.... 1*12 = 2*6 = 3*4 = 12... let Bootstrap work for you. Obvious 5 elements in a single line will be a problem... (I'm assuming 6 elements max...)

Uh-oh.. is this an angular generated listing? Have you looked at the stackoverflow tag angular-ui-bootstrap?

Solution 5:

I recently found a solution to this problem:

.row-center {
  display: table;
  word-spacing: -2em;
  width: 100%;
}

.col-center {
  display: inline-block;
  word-spacing: normal;
  *display: inline;
  *zoom: 1;
}
.col-center:before {
  content: '';
  display: block;
}

I made an article about it and how it works: http://cahnory.tumblr.com/post/127631188627/effectively-remove-whitespaces-between