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

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

  • автор:

Свойство background-position

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

Можно также задавать положение ключевыми словами. В этом случае порядок значений не важен. Ключевые слова для вертикали: top , center , bottom . Ключевые слова по горизонтали: left , center , right .

Как пользоваться ключевыми словами

Чтобы разместить картинку ключевым словом, нужно указать одно значение для вертикали и одно для горизонтали. К примеру, если указать значение top right , то картинка станет сверху справа.

Порядок слов неважен: можно написать top right , а можно — right top . Если есть ключевое слово center — его можно опускать. Например, top center , все равно что просто top . А center center все равно что просто center .

Синтаксис

Пример

По умолчанию фоновая картинка будет в верхнем левом углу:

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

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

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

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

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

Тут обычно название картинки

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

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

Тут обычно название картинки

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

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

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

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

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

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

Как окружить фото текстом и задать отступы текста от картинки

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

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

Задаем отступ текста для фото

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

< img src = "здесь_веб-адрес_картинки" alt = "" / >alt=»Здесь_подсказка_если_картинка_не_загрузлась» title=»Здесь_встплывающая_над_картинкой_подсказка» width=»ширина_ картинки_в_точках_числом»
height=»высота_ картинки_в_точках_числом»
align=”left”
style=»margin: 3px 12px 0px 0px;>

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

Отступ под изображением

Миша вставил на страницу фотографию совы в рамке (рис. 1), но в браузере под фотографией отображается небольшой отступ. Подскажите Мише пять способов, как его убрать.

Сова в рамке

Рис. 1. Отступ под фотографией

    Изображение body < background: #333; >div 

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

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

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