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

Как сделать отступ текста от картинки?

Доброго времени суток! имеется два блока, которые находятся рядом т.е.

float: left

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

Лучшие ответы ( 1 )

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

Ответы с готовыми решениями:

Как внути input сделать отступ для текста?
Добрый день. Как внути input сделать отступ для текста? <form <input.

Как задать дополнительный отступ для картинки внутри div?
Здравствуйте. Есть такой код: .big_arrow2 < display: block; background: #f7f7f7.

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

Как убрать отступ (строчный) текста от поля формы?
Здравствуйте помогите устранить один нюанс, как убрать отступ текста от поля формы? на рисунку.

653 / 556 / 322

Регистрация: 27.01.2015

Сообщений: 1,374

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

Решение

margin-right для картинки или блока с картинкой

Как сделать отступ от картинки?

Часто те люди, которые только делают первые шаги в размещении различных текстов через админку сайта или блога, сталкиваются с такой проблемой. Они вставляют картинку посреди текста, все-таки это очень просто сделать в любой админке, но вот дальше начинается проблема — картинка располагается слишком близко к тексту (это некрасиво). Возникает вопрос — как сделать отступ от картинки — так, чтобы расстояние между текстом и картинкой увеличилось.

В некоторых админках предусмотрены встроенные способы для того, чтобы сделать отступ. Там, где таких способов нет, придется немного вручную поправить html/css. Данная статья не претендует на попытку научить редактированию html/css, а только показывает, как добавить отступ к картинке.

Шаг 1 — нужно найти в редакторе админки возможность редактировать html/сss код размещаемой статьи. Как правило это скрывается за ссылками или закладками с названием типа «текст», «html» или как-то так.

Шаг 2 — нужно найти то место, где в статье располагается картинка. Обычно код вставленной картинки выглядит примерно так:

Шаг 3 — Теперь вам нужно вписать следующую фразу сразу после «img»:

У вас должно получиться вот так:

Больше ничего делать не надо, можете сохранять страницу. Если размер отступа вас по-прежнему не устраивает, то надо увеличить число, написать там на «10px;», а скажем «20px;»

P.S. Возможно, вы — smmщик? Вам пригодится это ⬇️

Если вы работаете в SMM, вам наверняка знакома такая проблема: люди пишут вам вопросы в соцсетях, а вы их просто не видите. Потому что пуш-уведомления об этом, где-то там теряются среди сотен других от десятков приложений у вас на телефоне.

Эту проблему отлично решает сервис Chotam.ru — который пересылает обращения из соцсетей вам или коллегам на почту или Телеграм. Там же есть и возможность отвечать прямо из Телеграм — даже не думая, откуда там прилетел сейчас этот вопрос, из ВК или Инсты. Просто отвечаете в Телеге, и ответ улетает туда, где был вопрос.

Статьи на похожие темы:

• 10 самых важных плагинов для WordPress на стартеИтак, Вы поставили свой сайт на WordPress. Но это еще не все, чтобы начать нормальное продвижение. Как минимум — Вы.
• Что такое «ремаркетинг»?Замечали такую вещь – бывает, вы заходите на какой-то сайт, а потом при посещении других сайтов, вас буквально преследует реклама.
• Зачем нужен сайтСоздание сайта стоит денег, и часто владельцы бизнеса задают вопрос — а вообще зачем нужен сайт? Может мы прекрасно проживем.

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

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

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

img  margin-right: 10px; > 

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

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

img  margin: 10px; > 

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

Изображения в тексте

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

Рисунок по центру

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

, для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

      
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

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

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Пример 4. Создание рисунка на поле с помощью таблиц

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

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

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .