Нежелательные пробелы в высоте строки HTML

Question

Высота строки вызывает пропуски между изображениями и другими элементами, но изменение его значения на 0 делает текст невозможным для чтения, есть ли какое-то простое решение для этого?

Вообразите какой-нибудь повторяющийся элемент DOM, например тень, как бы вы стерли пробел между этим элементом и всем, что находится выше (это может быть изображение, div, span, button, form)?

Установка класса для этого .shadow и присвоение ему высоты строки 0, конечно, не работает, так как высота строки работает немного по-другому.

Я сделал 3 изображения, первое показывает, о чем я говорю, второе исправляет это, третье показывает, как второе фактически уничтожило весь макет:

http://jsfiddle.net/J5PLf/

Я думаю о чем-то вроде:

body {
   line-height: 0;
}

p {
   line-height: 1.2em;
}

Но я думаю, что это немного рискованно, что если в тегах

будет какой-то свободный текст?

Answer 1

Не связывайтесь с line-height и установите display:block на изображениях.

Fiddle: http://jsfiddle.net/J5PLf/1/

#example1, #example2, #example3 {
    width: 200px;
    float: left;
}
img {
    display:block;
}