Unordered list contains a weird space between list items

Question

I'm working on a portfolio for a friend. The tiles for each portfolio item do not align properly, there is an odd space after the 3rd tile which causes the fourth item to stick out. This makes the 6th item not fit in.

Screenshot: enter image description here

Code:

  <!-- UX Works container -->
  <div id="work" class="container">
    <h2>UX Projects</h2>
    <ul class="work-images">
      <li> <!-- THREE ITEMS -->
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="interaction-design.html" title="Image 01"><img src="img/1-thumb.jpg"/></div>
        <div class="thumbnone">Wearable G-Scope Interaction Design project</div></a>
      </li>
      <li>
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="information-architecture.html"><img src="img/2-thumb.jpg" />
        </a>
        <div class="thumbnone">Information Architecture for Instant Noodles E-Store</div>
        </div>
      </li>
      <li>
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="research-critique.html"><img src="img/3-thumb.jpg" />
        </a>
        <div class="thumbnone">Review of CHI2014 paper Quantifying Visual Preferences </div></div>
      </li>
      <li> <!-- THREE ITEMS -->
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="requirements-engineering.html"><img src="img/3-1-thumb.jpg" />
        </a>
        <div class="thumbnone">Requirements modelling for Amazon Drone </div></div>
      </li> 
      <li>
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="inclusive-design.html"><img src="img/9-thumb.jpg" />
        </a>
        <div class="thumbnone">Inclusive design WCAG2.0 Poster </div></div>
      </li>
      <li>

EDIT** CSS - CODE:

/**** Work container *****/
ul.work-images li {
    list-style:none;
    display:inline-block;
    margin: 8px 10px;
    background:
}
ul.work-images li:first-child {
    margin-left:0;
}
ul.work-images li:second-child {
    margin-left:0;
}
ul.work-images li:third-child {
    margin-left:0;
}
ul.work-images li div {
    background:url(../img/eye.png) 50% 50% no-repeat;
    background-color: #f04949;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
ul.work-images li img {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
ul.work-images li img:hover {
    opacity:0.1;
}

Does anyone know what caused this?

look at this: http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items — caramba, May 06 '15 at 23:36
I think its the `margin: 8px 10px;` causing that gap. Incidentally, there's no `:third-child`. You may want [`:nth-child(3)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child). — showdev, May 06 '15 at 23:59
Possible duplicate of [Best way to manage whitespace between inline list items](https://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items) — Rob, Aug 31 '18 at 12:19

score 2 · Accepted Answer · answered May 07 '15 at 00:27

2

This is caused by the margin on your ul.work-images li style. A fix for it would be to remove the margin on the left-hand side like this:

ul.work-images li {
  list-style: none;
  display: inline-block;
  margin: 8px 10px 8px 0px;
}

answered May 07 '15 at 00:27

Leo Farmer

7,730
5
31
47

This works. I thought it was L, R, T, B but turns out its the other way round. Thanks! – user3504462 May 07 '15 at 00:31
Yes the order is T, R, B, L – Leo Farmer May 07 '15 at 00:34

score 0 · Answer 2 · answered May 07 '15 at 00:28

you've a lot of solutions to do

First you can use html bootstrap grid system here you're link http://getbootstrap.com/examples/grid/ and this solution will be good for you as you're making portfolio

another solution :

you can give your img element fixed width and height in example

<img src="img/1-thumb.jpg" style="width:320px;height:320px;"/>

and this will fix the problem of space you face

also you can give your <div> width in your style

<div style="width:33%;">

Kidkie · Answer 3 · 2018-08-31T12:11:58.900

0

Apparently you can get rid of this issue by setting <ul> to font-size: 0; and then setting font-size on <li>.

As seen here: A Space between Inline-Block List Items

edited Aug 31 '18 at 12:11

answered Apr 12 '16 at 09:15

Kidkie

83
1
9

Unordered list contains a weird space between list items

3 Answers3