Как сделать отступ от картинки?
Часто те люди, которые только делают первые шаги в размещении различных текстов через админку сайта или блога, сталкиваются с такой проблемой. Они вставляют картинку посреди текста, все-таки это очень просто сделать в любой админке, но вот дальше начинается проблема — картинка располагается слишком близко к тексту (это некрасиво). Возникает вопрос — как сделать отступ от картинки — так, чтобы расстояние между текстом и картинкой увеличилось.
В некоторых админках предусмотрены встроенные способы для того, чтобы сделать отступ. Там, где таких способов нет, придется немного вручную поправить 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 пикселей для всех сторон каждого изображения.
HTML img отступы, CSS img по центру, растянуть CSS 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 код предполагается таким:
Если у картинки есть свойство display равным block то этот прием работать не будет, так как картинка стала блочной, а для блочных элементов есть стандартный способ выравнивания по центру (margin: 0 auto;):
#my img display: block;
width: 100%;
height: auto;
margin: 0 auto;
>
HTML код предполагается таким:
Растянуть CSS img
Растянуть CSS img можно вот так:
#my img display: block;
max-width: 100%;
height: auto;
>
HTML код предполагается таким:
Вот и все, на этом наш очередной и очень краткий урок по созданию сайтов заканчивается. Надеюсь вы усвоили урок и будете меньше совершать ошибки при верстке сайтов. Если писать чистый и понятный код при создании сайтов вы будете более уверены в себе, кроме этого ваш код будет более понятным другим программистам. А значит будете более цены как работник в команде.
Вэб блог бетінде ақпараттық салаға байланысты көптеген мақалалар бар.
- Лендинг пейдж
- SEO оптимизация сайта в Алматы
- Веб студия в Алматы. Студия веб дизайна в Казахстане
- Заказать доску объявлений
- Интернет реклама в Алматы
- Как открыть интернет магазин
- Как привлечь клиентов
- Сайт каталог в Алматы
- Система оплаты на сайте
- Продвижение сайта в Алматы с гарантией!
- Создание интернет магазина
- Сайт визитка в Алматы
- Поддержка сайта
- Интернеттегі жарнама
- Фирменный стиль компании
- Создание флаера
- Создание логотипа в Алматы
- Рерайтинг в Алматы
- Копирайтинг в Алматы
- Открыть магазин одежды
- Интернет магазин под ключ
- Интернет эквайринг
- Веб блог компании
- Как раскрутить сайт
- Разработка стартапа под ключ. Купить стартап или как создать стартап
- Интернет эквайринг Сбербанка или система оплаты Сбербанка
- Подключить систему оплаты на сайте в Казахстане. Интернет эквайринг
- Что такое интернет магазин
- Заказать корпоративный сайт в Алматы под ключ
- Тендер деген не? Тендерге қатысу, тендермен айналысу
- Интернет маркетинг деген не? SMM маркетинг деген не?
- Программист деген кім? Программист мамандығы
- Python тілі. Python деген не? Python жайлы қазақша сабақтар
- Стартап деген не? Стартап түрлері және стартап кезеңдері
- Лендинг деген не? Landing Page деген не?
- Веб сайт деген не? Браузер деген не? Сайт конструкторы деген не?
- Домен деген не? Хостинг деген не?
- Web сервер деген не? DNS сервер деген не?
- Что такое плагиат? Что считается плагиатом?
- Плагиат деген не?
- Что такое дропшиппинг? Дропшиппинг поставщики. Дропшиппинг в Казахстане
- Создание сайта с нуля в HTML. Создать сайт на WordPress
- Интернет маркетолог деген не? Маркетолог деген кім?
- Ссылки на сайте
- Вставка ссылок
- Обрезание картинок
- Создание визитки в Алматы
- Контекстная реклама в Гугл
- Реклама услуг в интернете
- Продажа товаров в интернете
- Презентация фирмы
- Карточка товара Wildberries
- Что такое микросайт?
Как сделать отступ картинки в css
Сообщение # 2 | 21:02:05 24 Окт 2012
Usmanec,
Общими стилями сайта, стилями конкретного блока, выводом изображений через код img и его стили.
В ЛС — только адреса и пароли. Все остальное — на форуме.
Студия | Шаблоны | Статьи
Сообщение от KaiLee
Сообщений: 24
Сообщение # 3 | 22:11:25 24 Окт 2012
Можно ещё пробелов наставить в нужных местах!
Сообщение от Usmanec
Сообщений: 5463
Сообщение # 4 | 22:45:20 24 Окт 2012
Usmanec,
Пробелы не помогут в принципе. Во-первых, задолбаетесь расставлять, во-вторых, у посетителя в браузере могут стоять пользовательские настройки текста — это будет выглядеть ужасно.
В ЛС — только адреса и пароли. Все остальное — на форуме.
Студия | Шаблоны | Статьи
Сообщение от KaiLee
Сообщений: 23
Сообщение # 5 | 10:22:47 26 Фев 2013
«Usmanec,
Общими стилями сайта, стилями конкретного блока, выводом изображений через код img и его стили.»
а можно пример?
Сообщение от Flora8219
Сообщений: 369
Сообщение # 6 | 10:30:39 26 Фев 2013
.конкретный img <
margin-right: 15px;
>
Сообщение от NZT
Сообщений: 23
Сообщение # 7 | 10:34:39 26 Фев 2013
$IMAGE1-right$
прописала так, изменений нет.
Сообщение от Flora8219
Сообщений: 491
Сообщение # 8 | 10:38:02 26 Фев 2013
Usmanec,
можно так ещё
или присвоить класс
и прописать с классом . более лучший вариант
но потом надо отменить обтекание, где Вам надо, например nfr прописать в код отмену
— коротко
или более лучший вариант
Цитата ( Flora8219 )
$IMAGE1-right$
))) . такое в стилях не отработает
Понял тебя, тридцатый .
Сообщение отредактировал brodyaga30 — Вторник, 26 Фев 2013, 10:44:17
Сообщение от brodyaga30
Сообщений: 23
Сообщение # 9 | 11:00:18 26 Фев 2013
У меня наверное руки не оттуда растут, но не получается, перепробовала все предложенные Вами варианты. Вот картинка, от которой хочу сделать отступ. http://www.adenium-sib.ru/index/obshhie_pravila/0-14
Сверху снизу почему то есть отступ, а слева от изображения нет
Сообщение от Flora8219
Сообщений: 491
Сообщение # 10 | 13:49:51 26 Фев 2013
Flora8219, вам привели пример на отступ справа, надо слева, тогда должно быть по другому
вот почитайте как прописать отступы — margin
есть варианты задать конкретный отступ, можно прописать отдельно по всем сторонам в одном правиле
например :
margin: 15px
margin: 15px 15px 15px 15px
— одно и тоже только в одном случае краткая запись для всех сторон, в другом по конкретным сторонам всё прописано
пропишите как Вам надо/удобнее