— строчный элемент. Соответственно, располагаются в строку. Так как два изображения не помещаются в div, второе автоматически переносится. Между ними появляется промежуток.
Я сделал для div правило: line-height:0; и промежуток пропал. Вот только я сам до конца не понял, почему так.
vertical-align: bottom — чтобы опустить изображение с базовой линии в самый низ строки line-height: 0 — на тот случай если изображение по высоте меньше чем высота строки
Убрать зазор между div и верхом страницы День добрый, господа! Есть у меня страница, на которой всего лишь один блок div, выравненный по.
Не могу убрать зазор между дочерним и родительским блоком Не могу прижать шапку кверху контейнера. Пробовал маргины, паддинги, не работает. Уровень знаний.
Изображение просто меньше области, растяни его за счет родителя и задай object-fit:cover, как рекомендуют. Это сохранит пропорции, но обрежет от фото то, что не влазит в зону видимости.
Или прибегни к фоновому цвету. Судя по скрину, особого смысла изображения не несут.
Приветствуем Вас в нашей кофейне CoffeLike
О кофейне
Coffee Like - место, где можно отвлечься от всего - с хорошим кофе, вкусной выпечкой и дружелюбным персоналом. Место, куда захочется возвращаться снова и снова. Нам важно, чтобы наш кофе был качественным и вкусным, поэтому мы закупаем только качественное сырье с оценками от 80 баллов SCA для коммерческих сортов и от 85 баллов для микролотов из стран Океании, Центральной и Южной Америки, Азии, Африки. В нашем интернет-магазине вы можете найти и купить кофе разных видов: арабику или робусту, колумбийский и вьетнамский кофе, кофе без кофеина и т.д.
О кофе
В нашем магазине мы используем кофейную смесь Колумбия Ла Луна. Это смесь зерен 100% Арабики. Степень обжарки - средняя. А оборудование последнего поколения итальянской марки "La Marzocco" позволяет нам варить кофе высшего класса.
О чае
Хороший чай уместен всегда и везде, в уединении он поможет собраться с мыслями и сконцентрироваться, придать ясность, в компании друзей поможет чувствовать себя непринуждённо, расслабленно. Каждый сорт чая создаёт своё уникальное ощущение пространства и время. Чай - отличная возможность встретиться всей семьёй за столом и поделиться новостями, а разнообразная и качественная посуда способна придать каждому чаепитию свою уникальность и создать неповторимую атмосферу.
Довольно часто верстальщики сталкиваются с проблемами размещения элементов на странице из-за присутствия лишних отступов при определенных ситуациях. В статье будет рассмотрен случай, когда картинку размещают внутри блока, в результате чего появляются неизвестный отступ. Здесь вы найдете объяснение и решение этой проблемы.
Как и в обычной жизни, в верстке бывают аномальные ситуации, которые сложно объяснить. Именно такая ситуация может возникнуть, когда тег для вставки изображений (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. Это тоже поможет избавиться от нежелательного отступа.
Я удалил отступы и поля, но между изображениями остается пространство. Как я могу сделать так, чтобы картинки были сразу рядом, без пробелов?
Ответы (2)
Браузеры интерпретируют символы новой строки как пробел, поэтому вам следует удалить их, если вы не хотите иметь там один пробел.
В доставленном источнике нет новых строк между изображениями. — personIgor Jerosimić; 24.02.2013
+1 @IgorJerosimić я не могу представить, что это может быть так глупо — personNullPoiиteя; 24.02.2013
Вы можете возиться с float вместо того, чтобы полагаться на стиль inline-block по умолчанию, хотя в этом случае это, вероятно, будет довольно сложно. Вы можете установить размер шрифта родителя равным нулю. Посмотрите эту скрипту. Вы можете установить отрицательные поля. Посмотрите эту скрипту. Или, наконец, вы можете удалить пробелы между тегами img в разметке, однако это может сделать разметку беспорядочной. Это действительно зависит от вас, чтобы решить, какой метод является лучшим в вашей конкретной ситуации. Обратите внимание, что фоновые изображения больше подходят для свойства CSS background-image и сокращенного свойства background , если эти изображения не были просто заполнителями.
О кофейне
Сообщение от Fedor92 