Spaces between elements

Question

Why are there space's between the pictures? http://jsfiddle.net/dasmus/6Ltrs9tw/

CSS

.gallery{
width:900px;
height:640px;
}
a{
display:inline-block;
}

a img{
width:200px;
height:141px;
}

HTML

<div class="gallery">
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
</div>

See: http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements .. http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Josh Crozier, Oct 05 '14 at 17:23
Thanks http://stackoverflow.com/a/19038859/1690081 this was the trick. (also float works) Why would it respect the whitespacejesus. — Mihkel L., Oct 05 '14 at 17:36

score 1 · Answer 1 · answered Oct 05 '14 at 17:23

1

because display: inline-block adds extra space between elements. There are hacks to take care of this but if you want the elements to touch you're better off just using float:left. Just be sure to either add overflow:hidden to a parent element or use a clearfix

JSFIDDLE

answered Oct 05 '14 at 17:23

jmore009

12,863
1
19
34

Thanks. Didn't read that out in w3School.com – Mihkel L. Oct 05 '14 at 17:26
Don't read in w3school please :) – Alex Char Oct 05 '14 at 17:27
isn't w3school like the one who makes standards =). What would you sugges to have for better reference? – Mihkel L. Oct 05 '14 at 17:30
2

@MihkelL. - No, w3schools is nothing like the one that makes the standards. That's the W3C, a completely different organisation. – Alohci Oct 05 '14 at 17:33

score 0 · Answer 2 · answered Oct 05 '14 at 17:23

0

  a{
    display:inline-block;
    float:left; /* added */
  }

answered Oct 05 '14 at 17:23

Vitorino fernandes

15,794
3
20
39

you don't need both, the point off using `inline-block` was to align the elements horizontally. – jmore009 Oct 05 '14 at 17:24

Spaces between elements

2 Answers2