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

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

  • автор:

Как разместить несколько картинок рядом по горизонтали?

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

Решение

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

Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).

Пример 1. Картинки по горизонтали

HTML5 IE Cr Op Sa Fx

    Фотографии    

Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.

Фотографии, расположенные по горизонтали

Рис. 1. Фотографии, расположенные по горизонтали

Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги в примере в одну строку.

Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom . В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.

Пример 2. Отступы у фотографий

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Фотографии    

Результат данного примера показан на рис. 2.

Вид фотографий, оформленных с помощью стилей

Рис. 2. Вид фотографий, оформленных с помощью стилей

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

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

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

img  margin-right: 10px; > 

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

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

img  margin: 10px; > 

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

Расстояние между изображениями

Здравствуйте, у меня находятся на сайте 4 изображения, но находятся они слитно друг с другом. Как с помощью html можна сделать что б между ними было определнное расстояние?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Расстояние между изображениями
Здравствуйте, мне нужно сделать сайт на одну страницу с изображением по центру, но что бы после.

Расстояние между изображениями
Изучаю css и html. Что прописать, чтобы не было пробела между картинками? и где лучше в css-файле.

Как задать расстояние между изображениями
Скажите пожалуйста как задать расстояние между фото по горизонтали? 1.HTML <div >

Просвет между изображениями
Я сделал фоном изображения картинку и сделал картинку в шапку но эти картинки не прилегают друг.

Отступ между картинками



Но между картинками существуют пробелы как их убрать не знаю.

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать горизонтальный отступ между картинками
Есть блок <div> внутри которого 2 изображения, нужно сделать между ними отступ. <div.

Отступы между картинками
Подскажите, как убрать отступы между картинками(скрин). <div <div.

Пробелы между картинками
Я специально назвал пробелы так как между картинками позникает отступ из-за присутствия переносов.

Эксперт HTML/CSS

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908

1 2 3
img{ vertical-align: middle; }

105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 611
Ивванн,
1) для родителя line-height: 0;
2) на картинки

display: block; float: left;

3) на родителя

display: flex; flex-wrap: wrap;

ну или как написали выше

Эксперт HTML/CSS

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908

ЦитатаСообщение от Kraken73 Посмотреть сообщение

2) на картинки
CSSВыделить код
display: block;
float: left;

display:block; задавать излишне. Если вы задаете для элемента обтекание — он автоматически получает это свойство, так же как и при абсолютном и фиксированном позиционировании;

Регистрация: 12.10.2017
Сообщений: 220
AlexZaw, пишу ничего не преисходит, перед div вставлять?

Эксперт HTML/CSS

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908

ЦитатаСообщение от Ивванн Посмотреть сообщение

пишу ничего не преисходит, перед div вставлять?

Вставлять в файл стилей. Ну или в вашем случае, если вы еще не знаете что это такое добавить для каждой картинки valign=’top’

Регистрация: 12.10.2017
Сообщений: 220
AlexZaw, можете написать как этот код должен получится.

Эксперт HTML/CSS

2231 / 1619 / 641
Регистрация: 07.08.2016
Сообщений: 3,908

Лучший ответ

Сообщение было отмечено Ивванн как решение

Решение

img src="6.jpg" valign='top'>

И так у каждой картинки
Регистрация: 12.10.2017
Сообщений: 220
AlexZaw, спасибо.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Спрайты — расстояния между картинками
Вопрос наверно немного о вкусах, как вы составляете спрайты, а именно какой у вас интервал между.

Как убрать зазор между картинками?
Есть следующий код: <body> <p>some paragraph, it could be<br/>big or small, whatever.</p>.

Как убрать промежуток между картинками
Здравствуйте. Подскажите пожалуйста, как подогнать изображение треугольника впритык, чтобы не было.

Как убрать пробел между картинками?
В интернете ответов много, но ничего не ясно. Одни пишут это, другие то.. Как убрать пробел между.

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

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