Вот пример – https://jsfiddle.net/8qzuq881/1/
Я даже убрал отступы через стили:
margin:0px;
padding:0px;
Но не помогает. Как убрать зазор?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот пример – https://jsfiddle.net/8qzuq881/1/
Я даже убрал отступы через стили:
margin:0px;
padding:0px;
Но не помогает. Как убрать зазор?
Добавьте display
на картинку:
div.pre-img>img {
display: block;
}
Тогда браузеры будут точно прорисовывать ее размеры.
По умолчанию браузеры отображают 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;
}
Некоторые браузеры по умолчанию устанавливают небольшое пространство вокруг основонго содержания страницы
body { margin: 0px; }