Как сделать отступ от картинки?
Часто те люди, которые только делают первые шаги в размещении различных текстов через админку сайта или блога, сталкиваются с такой проблемой. Они вставляют картинку посреди текста, все-таки это очень просто сделать в любой админке, но вот дальше начинается проблема — картинка располагается слишком близко к тексту (это некрасиво). Возникает вопрос — как сделать отступ от картинки — так, чтобы расстояние между текстом и картинкой увеличилось.
В некоторых админках предусмотрены встроенные способы для того, чтобы сделать отступ. Там, где таких способов нет, придется немного вручную поправить html/css. Данная статья не претендует на попытку научить редактированию html/css, а только показывает, как добавить отступ к картинке.
Шаг 1 — нужно найти в редакторе админки возможность редактировать html/сss код размещаемой статьи. Как правило это скрывается за ссылками или закладками с названием типа «текст», «html» или как-то так.
Шаг 2 — нужно найти то место, где в статье располагается картинка. Обычно код вставленной картинки выглядит примерно так:
Шаг 3 — Теперь вам нужно вписать следующую фразу сразу после «img»:
У вас должно получиться вот так:
Больше ничего делать не надо, можете сохранять страницу. Если размер отступа вас по-прежнему не устраивает, то надо увеличить число, написать там на «10px;», а скажем «20px;»
Статьи на похожие темы:
- 10 самых важных плагинов для WordPress на стартеИтак, Вы поставили свой сайт на WordPress. Но это еще не все, чтобы начать нормальное продвижение. Как минимум — Вы.
- Какой движок сайта лучше (CMS)Понять, какой движок сайта лучше (речь про так называемую CMS) — непросто. Вообще говоря, выбор системы управления контентом (CMS —.
- Чек-лист для выбора движка сайтаСобираетесь создать сайт для своего малого бизнеса? Не знаете, на каком движке его создавать? Действительно – вокруг столько разных решений.
Отступы вокруг изображения
Для любого изображения можно задать пустые отступы по горизонтали и вертикали с помощью параметров hspace и vspace тега . Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 1).
Пример 1. Добавление отступов вокруг изображения
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.
Результат данного примера приведен ниже. Текст отступает от изображения на 10 пикселов.
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.
Тот же результат можно получить и с помощью стилей, используя стилевой атрибут margin , как показано в примере 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.
Удобство применения стилей заключается в том, что можно задать разные отступы для каждой стороны изображения. Для этого надо перечислить через пробел значения отступов, начиная с верхнего. В примере 2 верхний отступ задается как 10 пикселов, правый — 15, нижний — 20, а левый — 7 пикселов. Если все отступы должны быть одинаковы, поставьте только одно число.
Убрать отступ под картинкой
Добрый вечер, коллеги. Не могу разобраться с проблемой: на сайте есть баннера — div -> ссылка -> картинка. У дива есть бордер 1 пиксель. И вот я не могу понять, почему у меня между картинкой и нижним бордером появляется отступ? Помогите разобраться, пожалуйста! Есть условие, что баннер может быть любого размера по высоте.
Убрать отступ под картинкой в карточке товара
Добрый вечер форумчане и знатоки. Хочу убрать отступ на карточке товара. как решить эту проблему с.
Убрать отступ между картинкой и блоком
Добрый день! Подскажите, пожалуйста, откуда взялся этот зазор в 4px под картинкой? <!DOCTYPE.
Убрать пустое место под картинкой в ячейке
как убрать пустое место под картинкой в ячейке? в css написал padding: 0px; но внизу место.
div class="banner"> a href="http://podvodoy.pro/info/preview/236-17-noyabrya-startuet-mezhdunarodnyy-festival-vodnyh-vidov-sporta.html" target="_blank"> img src="/uploads/300-128_verkhniy.jpg" alt="Реклама" /> /a> /div> div class="banner"> a href="http://epark70.ru/" target="_blank"> img src="/uploads/extrim-park_300-128.jpg" alt="Реклама" /> /a> /div>
1 2 3 4 5 6 7 8 9 10 11 12
.banner { width: 100%; border: 1px solid #ccc; position: relative; margin-bottom: 20px; } .banner img { width: 100%; border: 0; padding: 0; margin: 0; }
Убрать отступ под картинкой
Добрый вечер, коллеги. Не могу разобраться с проблемой: на сайте есть баннера — div -> ссылка -> картинка. У дива есть бордер 1 пиксель. И вот я не могу понять, почему у меня между картинкой и нижним бордером появляется отступ? Помогите разобраться, пожалуйста! Есть условие, что баннер может быть любого размера по высоте.
Убрать отступ под картинкой в карточке товара
Добрый вечер форумчане и знатоки. Хочу убрать отступ на карточке товара. как решить эту проблему с.
Убрать отступ между картинкой и блоком
Добрый день! Подскажите, пожалуйста, откуда взялся этот зазор в 4px под картинкой? <!DOCTYPE.
Убрать пустое место под картинкой в ячейке
как убрать пустое место под картинкой в ячейке? в css написал padding: 0px; но внизу место.
div class="banner"> a href="http://podvodoy.pro/info/preview/236-17-noyabrya-startuet-mezhdunarodnyy-festival-vodnyh-vidov-sporta.html" target="_blank"> img src="/uploads/300-128_verkhniy.jpg" alt="Реклама" /> /a> /div> div class="banner"> a href="http://epark70.ru/" target="_blank"> img src="/uploads/extrim-park_300-128.jpg" alt="Реклама" /> /a> /div>
1 2 3 4 5 6 7 8 9 10 11 12
.banner { width: 100%; border: 1px solid #ccc; position: relative; margin-bottom: 20px; } .banner img { width: 100%; border: 0; padding: 0; margin: 0; }
Как убрать отступ после изображения
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки.
index.html
style.css
Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!
Такая конструкция работает нормально
css.
(Файл называется mains.css и находится по пути css/mains.css)
header background-image: url(../img/first-bg.jpg): no-repeat center top / cover;
height: 8 px;
width: 811 px;
>
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |