Remove space between ul

Question

I'm creating a list using <ul>, but I need it to be "united". Even though I removed all of the borders, padding and margins, it is still creating a space between the images. How can I remove it?

<h4>An Unordered List:</h4>
<ul>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
</ul>
<ul>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
</ul>

CSS

ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border:  0px 0px 0px 0px;
    display: table;
    table-layout: fixed;
    display: inline;
}

li {
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;  
    display: table-cell;

}

If you have `0px` as a value, you safely can ommit the unit. `0px` is the same as `0em`, `0%` and so on. — kleinfreund, Jun 05 '13 at 14:20

score 8 · Accepted Answer · edited Jun 05 '13 at 14:12

8

Use this css:

img{ display: block;}

edited Jun 05 '13 at 14:12

Pete

57,112
28
117
166

answered Jun 05 '13 at 14:11

Ani

4,473
4
26
31

Thanks for formatting, Pete! – Ani Jun 05 '13 at 14:14

score 2 · Answer 2 · answered Jun 05 '13 at 14:08

2

What are the styles set on the img tag? You should set those to 0 as well. By the way, if you are setting pixel dimensions for all sides (top, bottom, left, right) of an element with css, you can do a shorthand of of just 0 (without units) instead of repeating 0px four times.

That is:

border: 0;
padding: 0;
margin: 0;

answered Jun 05 '13 at 14:08

smilebomb

5,123
8
49
81

img { max-width: 100%; border: 0; -ms-interpolation-mode: bicubic; width: auto; height: auto; } – Pedro Silva Jun 05 '13 at 14:11
1

@PedroSilva Set the padding and margin to 0, too. User agent stylesheets normally throw a little padding on images by default. Is there a link I can look at? – smilebomb Jun 05 '13 at 14:12
yes, thanks, I did know, this "long code" was just to make sure I was doing it right. :) – Pedro Silva Jun 05 '13 at 14:18
@jefffabiny Which user agent puts padding on images? Never seen this. – kleinfreund Jun 05 '13 at 14:24
1

@kleinfreund Perhaps I'm mistaken; I can't seem to find any atm. I use so many libraries most the time I'm actually quite surprised what I'm finding as default UA styling. I just wanted to be sure that wasn't the offending element. – smilebomb Jun 05 '13 at 14:35

score 2 · Answer 3 · answered Jun 05 '13 at 14:14

2

You need to use display: table-cell; for UL element. Here is what I have achieved.

http://jsfiddle.net/REmUC/

answered Jun 05 '13 at 14:14

Ankit Jain

170
4

score 1 · Answer 4 · answered Jun 05 '13 at 14:18

Add img { vertical-align: sub; } and it should work.

ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border:  0px 0px 0px 0px;
    display: table;
}

li {
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;  
    display: table-cell;
}

img {
    vertical-align: sub;
}

http://jsfiddle.net/pulleasy/Cw3Gj/

score 1 · Answer 5 · answered Jun 05 '13 at 14:18

The gap between your image comes from the vertical-align: baseline; all images (inline-block elements) have assigned by default. This way an image sits on the same line as normal text would. This could be useful, but isn't in your usecase.

Set this property to middle to avoid this problem:

img {
    vertical-align: middle;
}

score 1 · Answer 6 · answered Jun 05 '13 at 14:22

Try this CSS:

ul {
    padding: 0px;
    border:  0px;
    display: table;
    table-layout: fixed;
    display: inline;
}

li {
    padding: 0px;
    border: 0px;
    display: table-cell;
    border-spacing: 0px 0px;
    border-collapse: collapse;
}
img {
    padding: 0px;
    margin: 0px;
}

Remove space between ul

6 Answers6