5

Вот пример – https://jsfiddle.net/8qzuq881/1/

Я даже убрал отступы через стили:

margin:0px;
padding:0px;

Но не помогает. Как убрать зазор?

3 ответа 3

6

Добавьте display на картинку:

div.pre-img>img {
  display: block;
}

Тогда браузеры будут точно прорисовывать ее размеры.

4

По умолчанию браузеры отображают img тег как inline элемент (например текст), при этом у него есть свойства блока (например div), так что его можно относить ближе к элементам типа inline-block.

Если рассматривать img как inline элемент, на примере текста,
то увидим, что текст по умолчанию выравнивается по базовой линии, оставляя пустое пространство под выносной элемент (например нижняя чать букв р, д, y и т.д.).
Таким образом, в данной ситуации, браузер просто не может точно рассчитать высоту строки.

Решения:

1. Изменяем правило выравнивания (vertical-align) на top или bottom

.pre-img img {
  vertical-align: top;
}

2. Изменяем тип на block

.pre-img img {
  display: block;
}

3. Сбрасываем высоту строки родительского контейнера div.pre-img

.pre-img {
  line-height: 0;
}

или

.pre-img {
  font-size: 0;
}

4. "Прикрелииваем" изображение к одной из сторон float = left или right.

.pre-img img {
  float: left;
}
-1

Некоторые браузеры по умолчанию устанавливают небольшое пространство вокруг основонго содержания страницы

body { margin: 0px; }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.