0

I'm in the process of making a pure CSS gallery, this is what my code looks like at the moment:

body {
  background: lightgrey
}
input[type=radio] {
  display: none
}
#gallery {
  width: 85vh;
  height: 65vh;
  margin: 0 auto;
  background: pink
}
label > img {
  width: 17vh
}
<div id="gallery">
  <input id="img1" type="radio" name="img" checked>
  <label for="img1" class="img img1">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img2" type="radio" name="img">
  <label for="img2" class="img img2">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img3" type="radio" name="img">
  <label for="img3" class="img img3">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img4" type="radio" name="img">
  <label for="img4" class="img img4">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img5" type="radio" name="img">
  <label for="img5" class="img img5">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
</div>

As you see, there exists a margin even though I set all margins and paddings to 0. Any idea what could be the reason?

Edit: Solved it by applying display: block to the images.

SoKeT
  • 590
  • 1
  • 7
  • 16
  • can use a font-size:0 on the #gallery (because there is spaces between inline elements) – Hacketo Jan 01 '15 at 14:44
  • I don't see margins. I see whitespace. Get rid of all whitespace (line returns, tabs, spaces). – kainaw Jan 01 '15 at 14:46
  • Also have a look at: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Hashem Qolami Jan 01 '15 at 14:49
  • @hacketo I didn't know there were spaces between inline-block elements, so even though I didn't apply your solution, I came up with mine thanks to you. – SoKeT Jan 01 '15 at 15:07

1 Answers1

2

Use font-size:0; As others have pointed out, the space is showing due to whitespace chars. Either remove them, or set font-size:0; or use float:left; with the images.

Using float-left

body {
  background: lightgrey
}
input[type=radio] {
  display: none
}
#gallery {
  width: 85vh;
  height: 65vh;
  margin: 0 auto;
  background: pink;
}
label > img {
  width: 17vh;
  float: left;
}
<div id="gallery">
  <input id="img1" type="radio" name="img" checked>
  <label for="img1" class="img img1">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img2" type="radio" name="img">
  <label for="img2" class="img img2">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img3" type="radio" name="img">
  <label for="img3" class="img img3">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img4" type="radio" name="img">
  <label for="img4" class="img img4">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img5" type="radio" name="img">
  <label for="img5" class="img img5">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
</div>

Using font-size:0;

body {
  background: lightgrey
}
input[type=radio] {
  display: none
}
#gallery {
  width: 85vh;
  height: 65vh;
  margin: 0 auto;
  background: pink;
  font-size: 0;
}
label > img {
  width: 17vh;
}
<div id="gallery">
  <input id="img1" type="radio" name="img" checked>
  <label for="img1" class="img img1">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img2" type="radio" name="img">
  <label for="img2" class="img img2">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img3" type="radio" name="img">
  <label for="img3" class="img img3">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img4" type="radio" name="img">
  <label for="img4" class="img img4">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img5" type="radio" name="img">
  <label for="img5" class="img img5">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
</div>
The Pragmatick
  • 5,379
  • 27
  • 44
  • I solved it by making the images display as blocks, which made them go on separate lines, then I used float to put them on the same line again, not realizing I didn't need display: block anymore. Thanks for your solution. – SoKeT Jan 01 '15 at 15:13