Удалите лишнее пространство в нижней части элемента списка HTML.

Есть ли способ удалить лишнее пространство, отображаемое в нижней части тега элемента HTML-списка без установки фиксированной высоты в элементе списка? I.e. Я хотел бы, чтобы элемент списка обернул его содержимое.

Следующий код показывает 3 изображения в горизонтальном списке, но высота каждого тега li на 4 пикселя больше, чем изображение. Я бы хотел, чтобы он обертывался вокруг изображения, то есть имел такую же ширину и высоту. Ширина в настоящее время такая же, но я просто не могу получить высоту, чтобы она соответствовала.

HTML:

<ul>
    <li><img alt="img1" src="img1.jpg" /></li>
    <li><img alt="img2" src="img2.jpg" /></li>
    <li><img alt="img3" src="img3.jpg" /></li>
</ul>

CSS

li 
{ 
    display:block; 
    float:left; 
    margin:0;
    padding:0;
    background-color:Yellow;
}

Ответ 1

Это ваш код: http://jsfiddle.net/23LcK/

Разрыв не связан с li s. Это пространство зарезервировано для descenders в таких буквах, как g и p (поскольку элементы img являются inline).

Вы можете удалить его с помощью любого из них, примененного к li img:

display: block: http://jsfiddle.net/23LcK/1/
vertical-align с top или bottom: http://jsfiddle.net/23LcK/2/

Ответ 2

Установить высоту линии: 0; на LI

li {
  line-height: 0;
}

Здесь jsfiddle, чтобы доказать, что он работает - http://jsfiddle.net/jm9Tj/

Ответ 3

Это должно сделать это за вас.

ul{margin-bottom:0}

Ответ 4

li заверяется в ul, который по умолчанию имеет некоторое дополнение. Поэтому, как сказал @Michael, вам нужно обнулить заполнение элемента ul.

Чтобы избежать этих проблем, всегда старайтесь использовать reset.css.

FYI: браузеры применяют CSS по умолчанию на веб-страницах. Вот почему вы видите элементы h1, большие, когда на вашем сайте нет CSS. Потому что браузеры имеют CSS по умолчанию. А поскольку браузеры происходят из разных компаний, у них разные CSS по умолчанию. Например, браузер может использовать 10px поля для абзацев, тогда как другой пользователь браузера 12px. Это означает, что у вас всегда есть несоответствия в вашем дизайне. Но CSS reset состоит из некоторых общих правил, которые удаляют эти стили CSS по умолчанию.

Ответ 5

li img {
    vertical-align: bottom;
}

Ответ 6

В используемом вами браузере, возможно, имеется по умолчанию маржа по умолчанию или дополнение к элементу img. Вы можете удалить это, используя что-то вроде этого:

li img {
    margin: 0;
    padding: 0;
}

Поскольку разные веб-браузеры используют разные стили по умолчанию, рекомендуется использовать таблицу стилей reset. Это задает всю нагрузку на разумные значения по умолчанию, поэтому вы получаете более последовательный стиль в браузерах. Поскольку он сбрасывает все на разумные значения по умолчанию, вы всегда должны загружать таблицу стилей reset перед любыми другими таблицами стилей.

Как отметил @Saeed, существует хорошая таблица стилей reset, а также дополнительная информация о том, почему вы должны использовать их здесь.