Расстояние от космоса

Question

Мне просто интересно, откуда берется это пространство между концом изображения и концом ли:

http://bluesys.ch/lussy/

это просто UL> li> img

расстояние от ада http://bluesys.ch/lussy/spacingfromhell.jpg

код:

div#slider {
    border: 5px solid #fff;
}

div#slider ul li {
    border-bottom: 1px solid pink;
}

div#slider ul li img {
    border-bottom: 1px solid green;
    margin: 0;
}

обратите внимание, что все поля и отступы установлены на 0 моим reset.css

Может кто-нибудь мне помочь? Я покрасил границы, которые вы можете видеть промежуток, о котором я говорю. Я использую Firefox.

Answer 1

Попробуйте установить высоту строки в 0 для этих изображений и / или элементов LI. В настоящее время у вас установлено значение 1.4 в теле, и img его унаследует. Краткий тест установки line-height: 0 в Firebug сделал стопку изображений в стопе.

Answer 2

Изображения являются встроенными элементами, такими же, как текст, и по умолчанию они располагаются на базовой линии шрифта, оставляя место для восходящего элемента.Есть несколько способов остановить это:

• line-height: 0 (в соответствии с предложением Робусто)
• display: block
• vertical-align: bottom

Answer 3

Если вы хотите избавиться от пробелов, вы можете попробовать:

li  {
  margin-bottom: 0;
  padding-bottom: 0;
}

Возможно, вам понадобится специальный класс для этих li элементов, чтобы применяемый CSS не делал этого со ВСЕМИ вашими li элементами на сайте.

Но что не так с разрывом? Мне это нравится. Помогает кадрировать каждое изображение ...