Довольно часто верстальщики сталкиваются с проблемами размещения элементов на странице из-за присутствия лишних отступов при определенных ситуациях. В статье будет рассмотрен случай, когда картинку размещают внутри блока, в результате чего появляются неизвестный отступ. Здесь вы найдете объяснение и решение этой проблемы.
Как и в обычной жизни, в верстке бывают аномальные ситуации, которые сложно объяснить. Именно такая ситуация может возникнуть, когда тег для вставки изображений (img) вставляется в контейнер, который обладает свойствами блочного элемента или плавающего объекта. Конфуз этой ситуации заключается в непонятном отступе, появляющемся ниже изображения.
Рассмотрим практический пример
Итак, для наглядности и лучшего восприятия проблемы предлагаю все посмотреть и, так сказать, «пощупать» на практике. Берем любое изображение и одеваем его в div. Ниже вы видите пример кода:
div>img src="img.png" width="250px" alt=""/>div>
При оформлении стилей зальем внутренний фон блока красным цветом. При нормальных условиях картинка полностью займет все место внутри блока и перекроет красный фон. Прописываем код для оформления
div display:block; width:250px; margin:0px auto;/*Центруем блок*/ background:#ff0000;/*Зальем блок красным цветом, чтобы визуализировать отступ*/> body background:#eee;>
В результате чего браузер нам покажет следующую картину
Судя по красной полосе в нижней части контейнера можно констатировать, что непонятный отступ имеет место. Воспользовавшись панелью веб-мастера в браузере, стало известно, что отступ составил 5,511 пикселей.
Очень забавляет тот факт, что во всех популярных браузерах этот баг присутствует, а вот всеми любимый Internet Explowerd в этом случае отрабатывает безупречно.
Причина появления отступа
Как человек с высшим техническим образованием смею Вас заверить, что ничего не происходит просто так, у всего есть причины. Разобравшись в этом вопросе я еще раз в этом убедился. Весь конфуз заключается в стандартных свойствах элементов. По умолчанию тег img имеет свойства строчного элемента, что в свою очередь означает, что элемент будет выравниваться по базовой линии текста. Эта линия располагается чуть выше нижнего края блока, так как для текста существует обязательный запас- место под «хвосты» букв.
Решение проблемы
Для исправления этого мелкого недочета достаточно присвоить изображению свойства блочного элемента. С этим нам поможет свойство display, прописываем картинке display: block; и избавляемся от ненужных проблем. Также можно подключить вертикальное выравнивание через свойство vertical-align. Это тоже поможет избавиться от нежелательного отступа.
Господа) помогите разобраться, что у меня за полоска справа от 1 и 3 картинки, как убрать?
Сначала думал, что картинка недостаточно узкая, но сделал шире и ниже, но полоска остаётся. В средствах разработчика в браузере не навести на эту полоску, чтобы посмотреть блок. Вот страница вот html:
Наши услуги
Групповые тренировки
Занятия в группах не более 8 человек 2 раза в неделю по 1 часу
Подробнее Подробнее и запись
Индивидуальные занятия
Персональные тренировки по индивидуальному плану, исходя из конкретных потребностей гимнастки
Подробнее Подробнее и запись
Составление выступлений
Составление уникальных упражнений для выступления на соревнованиях по художественной гимнастике
По умолчанию у картинки vertical-align: baseline;.
figure на одной линии с текстом. Без свисания букв (р,д,у,ц)
Как убрать нижнюю полосу или отступ от картинки до div (или другого родительского элемента)
Вариант 1. Разместить изображение по середине строки
figure < border: 10px solid #456; >img посмотреть немного другой ракурс
Вариант 2. Убрать размер шрифта или высоту строки
Вариант 3. Сделать фотографию блоком
Вариант 4. Задать фото float
figure < display: inline-block; /* убрать действие float вне родительского блока */ width: calc(100% — 100px); /* Аааа. Почему именно 100px. Я к этой цифре пришла путём перебора значений */ border: 10px solid #456; > img
2 комментария:
Анонимный «Убрать . линию высоты»? line height — высота строки. NMitra Спасибо, исправила! У меня иногда бывает, когда язык заплетается. По-видимому, это сказывается и на письме. И ведь дописывала этот фрагмент этой статьи, когда сочиняла http://shpargalkablog.ru/2014/04/line-height-css.html
При оборачивании изображения в блок div внизу картинки возникает странный отступ.
Появляется он потому, что элемент img является строчным inline. При верстке часто возникает задача его убрать, так как он лишний и только портит дизайн. Решений данного вопроса существует несколько.
С тремя из них я был уже знаком благодаря замечательному ресурсу для верстальщиков — IMG внутри блока — убираем странный отступ.
Пять способов убрать отступ под картинкой
Создаем блок div с классом .image, для которого назначаем ширину, центрирование и границу для наглядности. Внутрь блока div.image помещаем картинку:
2. Задать вертикальное выравнивание
Так как элемент img является строчным inline, то к нему применимо свойство vertical-align, как к любому строчному элементу. Мне такой способ нравиться больше всего:
4. Сделать картинку таблицей
Для изображения задать свойство display: table:
Все пять способов проверены мною и должны работать в реальности.
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:public trackByNumber = (_. … Continue reading
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени. Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки. index.html style.css
Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!
Такая конструкция работает нормально
css. (Файл называется mains.css и находится по пути css/mains.css) header background-image: url(../img/first-bg.jpg): no-repeat center top / cover; height: 8 px; width: 811 px; >
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
row 1 cell 1
row 1 cell 2
row 1 cell 3 must contain several lines
row 2 cell 1
row 2 cell 2
row 3 cell 1
row 3 cell 2
row 4 cell 1
row 4 cell 2
row 5 cell 1
row 5 cell 2
row 5 cell 3
row 6 cell 1
row 6 cell 2
row 5 cell 3
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
row 1 cell 1
row 1 cell 2
row 1 cell 3 must contain several lines
row 2 cell 1
row 2 cell 2
row 3 cell 1
row 3 cell 2
row 4 cell 1
row 4 cell 2
row 5 cell 1
row 5 cell 2
row 5 cell 3
row 6 cell 1
row 6 cell 2
row 5 cell 3
или если подсветка ячеек не обязательна, то можно так
