Как сделать отступ между картинками в css
Перейти к содержимому

Как сделать отступ между картинками в css

  • автор:

HTML img отступы, CSS img по центру, растянуть CSS img

В HTML img отступы появляются в некоторых случаях когда этого не ждешь:

HTML img отступы

Ясное дело что здесь нам не нужен отступ между картинками. Также отметим что в некоторых случаях возникает отступ под картинкой, и после нее видно пустое место, которое нам не нужно.

Удалить такой отступ между картинками или под одной картинкой довольно просто, для этого просто к картинке присваиваем значение display равным inline-block:

img display: inline-block;
>

Также отступ уйдет если к картинке присвоить значение display равным block:

Отступ под картинкой возникает из за того что картинка по умолчанию имеет свойство display равным inline. Поэтому нужно ей дать значение блочного или блочно-инлайнового. К сожалению не все вебмастеры знают это, и можно увидеть множество сайтов где под картинками стоят большие отступы, отступы ухудшающие дизайн сайта.

Однако не стоит всегда убирать отступ между картинками, в некоторых случаях наоборот нужно добавлять отступы между картинками, чтобы одна картинка отличалась от остальных, чтобы эта картинка не сливалась с другими. Для этого используйте свойство margin.

CSS img по центру

В CSS img по центру поставить не так трудно. Для этого есть два способа.

Если у картинки вы не меняли display на block то в родительском Div просто ставите text-align равным center:

HTML код предполагается таким:

My photo from Almaty

Если у картинки есть свойство display равным block то этот прием работать не будет, так как картинка стала блочной, а для блочных элементов есть стандартный способ выравнивания по центру (margin: 0 auto;):

#my img display: block;
width: 100%;
height: auto;
margin: 0 auto;
>

HTML код предполагается таким:

My photo from Almaty

Растянуть CSS img

Растянуть CSS img можно вот так:

#my img display: block;
max-width: 100%;
height: auto;
>

HTML код предполагается таким:

My photo from Almaty

Вот и все, на этом наш очередной и очень краткий урок по созданию сайтов заканчивается. Надеюсь вы усвоили урок и будете меньше совершать ошибки при верстке сайтов. Если писать чистый и понятный код при создании сайтов вы будете более уверены в себе, кроме этого ваш код будет более понятным другим программистам. А значит будете более цены как работник в команде.

Вэб блог бетінде ақпараттық салаға байланысты көптеген мақалалар бар.

  • Лендинг пейдж
  • SEO оптимизация сайта в Алматы
  • Веб студия в Алматы. Студия веб дизайна в Казахстане
  • Заказать доску объявлений
  • Интернет реклама в Алматы
  • Как открыть интернет магазин
  • Как привлечь клиентов
  • Сайт каталог в Алматы
  • Система оплаты на сайте
  • Продвижение сайта в Алматы с гарантией!
  • Создание интернет магазина
  • Сайт визитка в Алматы
  • Поддержка сайта
  • Интернеттегі жарнама
  • Фирменный стиль компании
  • Создание флаера
  • Создание логотипа в Алматы
  • Рерайтинг в Алматы
  • Копирайтинг в Алматы
  • Открыть магазин одежды
  • Интернет магазин под ключ
  • Интернет эквайринг
  • Веб блог компании
  • Как раскрутить сайт
  • Разработка стартапа под ключ. Купить стартап или как создать стартап
  • Интернет эквайринг Сбербанка или система оплаты Сбербанка
  • Подключить систему оплаты на сайте в Казахстане. Интернет эквайринг
  • Что такое интернет магазин
  • Заказать корпоративный сайт в Алматы под ключ
  • Тендер деген не? Тендерге қатысу, тендермен айналысу
  • Интернет маркетинг деген не? SMM маркетинг деген не?
  • Программист деген кім? Программист мамандығы
  • Python тілі. Python деген не? Python жайлы қазақша сабақтар
  • Стартап деген не? Стартап түрлері және стартап кезеңдері
  • Лендинг деген не? Landing Page деген не?
  • Веб сайт деген не? Браузер деген не? Сайт конструкторы деген не?
  • Домен деген не? Хостинг деген не?
  • Web сервер деген не? DNS сервер деген не?
  • Что такое плагиат? Что считается плагиатом?
  • Плагиат деген не?
  • Что такое дропшиппинг? Дропшиппинг поставщики. Дропшиппинг в Казахстане
  • Создание сайта в HTML. Создать сайт на WordPress
  • Интернет маркетолог деген не? Маркетолог деген кім?
  • Ссылки на сайте
  • Вставка ссылок
  • Обрезание картинок
  • Создание визитки в Алматы
  • Контекстная реклама в Гугл
  • Реклама услуг в интернете
  • Продажа товаров в интернете
  • Презентация фирмы
  • Карточка товара Wildberries
  • Что такое микросайт?
  • Разработка ПО на заказ. Лучшее программное обеспечение для бизнеса

Как сделать отступ между картинками в css

Все отображается нормально, но если текст поместить в

  "img/top.gif"> " background:url(img/content.gif); width:541px;"> Lorem ipsum dolor sit amet, consectetur adipiscing vel mattis nibh blandit a. Aliquam id mi eu metus lacus et nunc eleifend quis euismod magna dignissim. luctus sed augue. Vivamus pellentesque velit vel in hendrerit dui ullamcorper vulputate. Nam at eros vestibulum vitae commodo id, tempor sit amet lacus. sit amet mauris ante. Proin gravida, quam ornare Maecenas euismod quam eget turpis rhoncus pulvinar.  "img/bottom.gif">  

То между картинками и дивом получаются вертикальные отступы в 16 пикс. Оказалось, что это размер шрифта и если его изменять, то отсуп будет тоже меняться. Это происходит во всех броузерах кроме IE.
Там при базом размере появляется отступ 4 пикс и он тоже зависит от размера шрифта, но странно, не пропорционально. Также, в IE этот отступ только между верхней картинкой и дивом.

Я нашел такие решения:
В IE нужно верхний и записать в одну строку:

  "img/top.gif">" background:url(img/content.gif); width:541px;"> Lorem ipsum dolor sit amet, consectetur adipiscing vel mattis nibh blandit a. Aliquam id mi eu metus lacus et nunc eleifend quis euismod magna dignissim. luctus sed augue. Vivamus pellentesque velit vel in hendrerit dui ullamcorper vulputate. Nam at eros vestibulum vitae commodo id, tempor sit amet lacus. sit amet mauris ante. Proin gravida, quam ornare Maecenas euismod quam eget turpis rhoncus pulvinar.  "img/bottom.gif">  

На остальные броузеры это не повлияет.
Для них можно сделать такое:
Для дива прописать border (но не ноль), все круто, но рамка межает
Или прописать (для дива) padding-top = 1 — это уберет отступ между верхней картинкой и дивом. И padding-bottom = 1 — это уберет отступ между нижней картинкой.

Вот вопрос: Почему вообще эти отступы появляются?
Почему они в IE другие. Почему бордер, паддинг и запись в одну строку помагают? И как можно от этого избавиться по-другому?

МОДЕРАТОР: Оформляйте код в специальные теги.

Последний раз редактировалось Arigato; 29.10.2009 в 13:39 .

Великий Саша
Посмотреть профиль
Найти ещё сообщения от Великий Саша

Как сделать расстояние между картинками css

Чтобы создать расстояние между изображениями с помощью CSS, вы можете использовать свойство margin . Это свойство позволяет задавать отступы вокруг элемента.

Например, если у вас есть несколько изображений, которые должны быть выровнены в строку, но с небольшим расстоянием между ними, вы можете использовать следующий CSS-код:

img  margin-right: 10px; > 

Здесь мы устанавливаем отступ справа от каждого изображения в 10 пикселей с помощью свойства margin-right . Таким образом, каждое изображение будет иметь небольшое расстояние между собой.

Вы также можете использовать свойства margin-top , margin-bottom и margin-left , чтобы установить отступы сверху, снизу и слева от изображений соответственно. Чтобы задать одинаковый отступ вокруг всех сторон изображения, вы можете использовать свойство margin с единственным значением, например:

img  margin: 10px; > 

Этот код установит отступ в 10 пикселей для всех сторон каждого изображения.

Простой способ задать отступы между flexbox элементами

Вариант 1 — отрицательный отступ для родительского блока

Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для родительского контейнера .box .

CSS

.box < display: flex; margin: 0 -5px; >.item

HTML

 See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark

Вариант 2 — без отрицательного отступа с отступами по бокам

Не используем отрицательные отступы и не используем :first-child/:last-child . Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px . Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.

CSS

.box < display: flex; padding: 0 5px; >.item

HTML

 See the Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) on CodePen.dark

Вариант 3 — фиксированная ширина с помощью calc()

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between .

CSS

.box < display: flex; flex-wrap: wrap; justify-content: space-between; >.item < width: calc(1/3*100% - (1 - 1/3)*10px); margin: 0 0 10px; >

где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.

HTML

 See the Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) on CodePen.dark

Вариант 4 — фиксированная ширина с помощью calc() с отступами по бокам

Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.

Я чаще всего использую этот вариант, как наиболее универсальный и удобный для размещения любых flexbox-элементов.

CSS

.box < display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -5px; >.item < width: calc(1/3*100% - 10px); margin: 5px; >

где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.

HTML

 See the Pen Uniform distribution of blocks with flex 4 by Denis (@deniscreative) on CodePen.dark

Естественно, что способов для того, чтобы задать отступы между флексбокс-элементами или для их равномерного размещения внутри контейнера, гораздо больше, и есть гораздо более изощренные варианты. Но я привел наиболее часто используемые способы и самые простые для понимания.

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *