Удалить место между ul

Question

Я создаю список, используя <ul>, но мне нужно, чтобы оно было «объединено». Несмотря на то, что я удалил все границы, отступы и поля, он по-прежнему создает пространство между изображениями. Как его удалить?

<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; 

} 

Answer 1

Используйте этот CSS:

img{ display: block;} 

Answer 2

Какие стили, установленные на img тег? Вы должны установить их на 0. Кстати, если вы задаете размеры пикселей для всех сторон (сверху, снизу, слева, справа) элемента с помощью css, вы можете сделать сокращение от 0 (без единиц) вместо того, чтобы повторять 0px четыре раза.

То есть:

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

Answer 3

Вы должны использовать display: table-cell; для UL элемента. Вот что я достиг.

http://jsfiddle.net/REmUC/

Answer 4

Добавить img { vertical-align: sub; } и он должен работать.

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/

Answer 5

Зазор между изображением происходит от vertical-align: baseline; всех изображений (встроенный блок элементов) были назначены по умолчанию. Таким образом, изображение находится на той же линии, что и обычный текст. Это может быть полезно, но не в вашем распоряжении.

Установите это свойство в центре, чтобы избежать этой проблемы:

img { 
    vertical-align: middle; 
} 

Answer 6

Тест 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; 
}