Any reason why there is space between elements?

Question

I'm not sure why there is space between some elements in a design i am working on. the elements in question are the a's: #gallery li a I would like to know if there is a way to get rid of the space without using neg margins.

   /* ========== PAGE: GALLERY CSS START ========== */
   #gallery {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   #gallery li {
     float: left;
     //width: 28.3%;
     padding: 1em 1em 0 1em;
     margin: 2.5%;
     background-color: #fdfee6;
     color: #bdc3c7;
     border-radius: 10px;
     border-bottom: 4px solid #bdc3c7;
   }
   #gallery li a {
     display: inline-block;
   }
   #gallery li div {
     width: 150px;
     height: 150px;
     box-shadow: inset 0 0px 5px -3px #000;
   }
   #gallery li a:first-child div {
     border-radius: 5px 0 0 5px;
   }
   #gallery li a:last-child div {
     border-radius: 0 5px 5px 0;
   }
   #gallery li a p {
     font-family: 'Nunito', sans-serif;
     margin: 0;
     padding: 1em 0;
     color: #384047;
   }
   /* ========== PAGE: GALLERY CSS END ========== */

<section>
  <!-- main section start -->
  <ul id="gallery">
    <li>
      <a href="#">
        <div style="background:#ff784f;"></div>
        <p>#ff784f</p>
      </a>
      <a href="#">
        <div style="background:lightblue;"></div>
        <p>lightblue</p>
      </a>
      <a href="#">
        <div style="background:#11980d;"></div>
        <p>#11980d</p>
      </a>
    </li>
  </ul>
</section>
<!-- main section end -->

fiddle: http://jsfiddle.net/3heyxvbg/

Default behavior of inline-block elements, few ways to deal with it: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — sinisake, Sep 15 '15 at 17:32

score 3 · Accepted Answer · answered Sep 15 '15 at 17:33

The space between the elements is the default behaviour of inline-block elements.

To fix it without negative margins:

#gallery li a {
  display: inline-block; /* Remove */
  float: left; /* Add */
}

Updated JSfiddle

Modified Output:

/* ========== PAGE: GALLERY CSS START ========== */
   #gallery {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   #gallery li {
     float: left;
     //width: 28.3%;
     padding: 1em 1em 0 1em;
     margin: 2.5%;
     background-color: #fdfee6;
     color: #bdc3c7;
     border-radius: 10px;
     border-bottom: 4px solid #bdc3c7;
   }
   #gallery li a {
     float: left;
   }
   #gallery li div {
     width: 150px;
     height: 150px;
     box-shadow: inset 0 0px 5px -3px #000;
   }
   #gallery li a:first-child div {
     border-radius: 5px 0 0 5px;
   }
   #gallery li a:last-child div {
     border-radius: 0 5px 5px 0;
   }
   #gallery li a p {
     font-family: 'Nunito', sans-serif;
     margin: 0;
     padding: 1em 0;
     color: #384047;
   }
   /* ========== PAGE: GALLERY CSS END ========== */

<section>
  <!-- main section start -->
  <ul id="gallery">
    <li>
      <a href="#">
        <div style="background:#ff784f;"></div>
        <p>#ff784f</p>
      </a>
      <a href="#">
        <div style="background:lightblue;"></div>
        <p>lightblue</p>
      </a>
      <a href="#">
        <div style="background:#11980d;"></div>
        <p>#11980d</p>
      </a>

    </li>
  </ul>
</section>
<!-- main section end -->

Do note that while this may work for simple situations, it may need a "clearfix" to work with more complicated layouts. — Toothbrush, Nov 04 '15 at 17:03

score 1 · Answer 2 · answered Sep 15 '15 at 18:01

1

The space is due to the inline-block element. You can use float:left to discard the space between elements. like ..

#gallery li a {
  float: left;
}

But as it is floating element ,You will not be able to specify the margins of the ul element to position it according to your design. To overcome this you have to add overflow:auto; in its parent div.

There is another solution if you want to use display:inline-block. You just have to put some negative margin in the li elements. like this..

#gallery li a {
  display: inline-block;
 margin: 0 0 0 -5px;
}

Although use of negative margins are not good practice. But you can use negative margins in some specific cases like this situation.

answered Sep 15 '15 at 18:01

Shawon Kanji

630
4
12

because, as far as i am aware, this is not a bug, just normal behavior the neg margin would only have to be `-4px` this might need to be changed due to font size but at least in this problem it is `-4px`. I wanted a way without neg margins cus that way breaks in IE6&7 – yobddigi Sep 15 '15 at 18:07
then use `float:left;` . But use `overflow:auto;` in the parent div to change the margins of the list. – Shawon Kanji Sep 15 '15 at 18:11
but wont `overflow:auto;` put scroll bars on the element in some browsers? – yobddigi Sep 15 '15 at 18:20
That is `overflow:scroll;` – Shawon Kanji Sep 15 '15 at 18:23

score 0 · Answer 3 · answered Sep 15 '15 at 17:33

0

See this fiddle

This behaviour is due to your dispaly inline property.

Thus, Remove display:inline-block and add float:left; instead.

That is, the new CSS for #gallery li a would be like

#gallery li a {
    float: left;
}

answered Sep 15 '15 at 17:33

Lal

14,505
4
39
63

Any reason why there is space between elements?

3 Answers3

See this fiddle