Как разместить несколько картинок рядом по горизонтали?
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.
Решение
Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 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 >
Просвет между изображениями
Я сделал фоном изображения картинку и сделал картинку в шапку но эти картинки не прилегают друг.
Отступ между картинками
