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

Question

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

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

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

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

http://jsfiddle.net/J5PLf/

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

body {
   line-height: 0;
}

p {
   line-height: 1.2em;
}

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

теги?

Answer 1

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

Скрипка: http://jsfiddle.net/J5PLf/1/

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