2

I've these four div tags arranged in 2x2 grid (middle one only for line break)

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

<div class=""></div>

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

Along with this css:

.rectangle {
  width: 25px;
  height: 25px;
  background: #ccc;
  display: inline-block;
  margin: 0px;  /* doesn't work */
  padding: 0px; /* doesn't work */
}

JSFiddle result output shows gaps between the rectangles. Is there a way to get rid of the gaps?

http://jsfiddle.net/brMPs/958/

Raja
  • 6,354
  • 9
  • 30
  • 34
  • https://www.google.com/search?q=inline-block+space+between, https://www.google.com/search?q=inline-block+space+under - what did _you_ research? – CBroe Oct 19 '17 at 23:55

2 Answers2

2

You could either float the rectangles left or zero out the font size for the hidden spaces between the DIV tags. Here, try this adding a container div and using

.container {
  font-size: 0;
}

http://jsfiddle.net/brMPs/963/

Scott
  • 3,736
  • 2
  • 26
  • 44
0

The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:

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

<div class=""></div>

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

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Matteo Boscolo
  • 638
  • 2
  • 8
  • 18