Как сделать обтекание картинки текстом в html
Как сделать обтекание картинки текстом в html
CSS: Обтекание элементов
Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.
Плавающие элементы
Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:
Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).
Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.
Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он «плавает» на странице.
Поскольку плавающий элемент был исключён из общего потока, то остальные блочные элементы, расположенные в коде после него, загружаются на страницу так, будто этого элемента там и не было. Обратите внимание, что блочные элементы располагаются под плавающим элементом, это происходит потому, что плавающий элемент больше не является частью общего потока.
Если вы внимательно посмотрите на рисунок, то увидите, что в отличие от блочных, при размещении строчных элементов или простого текста, расположенного внутри блочного элемента, учитываются границы плавающего элемента, поэтому строчные элементы и текст обтекают его.
Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
Для создания пустого пространства между картинкой и текстом, обтекающим ее, нужно добавить к картинке внешние отступы. Поскольку картинка смещена к левой границе родительского элемента, достаточно будет добавить внешние отступы только справа и снизу, чтобы слегка отодвинуть от нее текст:
Отмена обтекания
Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear, которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий.
Для CSS свойства clear можно установить одно из значений:
Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Про то, какие именно форматы растровой графики (Gif, Png, Jpg) и в каких случаях лучше всего будет использовать для вставки картинок на страницы своего сайта, мы подробно успели поговорить с статье, ссылка на которую приведена чуть выше.
Сегодня же мы подробно рассмотрим все аспекты использования тега Img для вставки изображений, посмотрим как задать обтекание фотографии текстом в Html коде, узнаем как использовать изображения в качестве фона для сайта, как изменять их размер и задавать выравнивание (по центру, влево и вправо).
Использование тега Img и его атрибутов Src, Width и Height
Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента языка гипертекстовой разметки, одни из которых мы уже упомянули, а три остальных — Iframe (современный вариант использования фреймов), Object и Embed (для вставки видео и другого медиа контента).
Ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (фото в случае Img или видео и флеш в случае Object и Embed). Любой из этих четырех элементов подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную в нем атрибутами.
Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src.
Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.
Когда изображение начинает загружаться с вашего сервера на компьютер пользователя, браузер определяет истинные размеры этой картинки и раздвигает на эти самые размеры ту строчную область, которую создал при обнаружении в коде элемента Имг.
Если вы хотите, чтобы браузер сразу же выделял для этого элемента область нужного размера, а не потом ее изменял при получении данных о размере загружаемого изображения, то вы должны будет обязательно указать атрибуты Width и Height.
Если вы задали их, то тогда браузер пользователя создает область с нужными размерами и туда уже будет вписывать ваше фото, даже если оно другого размера. Кстати, иногда приходится встречать на сайтах начинающих вебмастеров такую ошибку.
На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.
И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).
Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). Сжать фото можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, онлайн фотошопе Пикслр.
Кстати, кроме заблаговременного уменьшения размера изображений для вставки на страницы сайта, следует со всей тщательностью подойти еще и к оптимизации веса. Порой можно без потери качества добиться кратного уменьшения веса графических файлов, что приведет к гораздо более быстрой их загрузке и снижению нагрузки на сервер хостинга. Можете для этой цели воспользоваться очень удобным и эффективным онлайн сервисом по оптимизации изображений.
Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и относительные, и абсолютные ссылки, о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.
Т.е. Src может содержать, например, следующие записи:
В первом случае, графический файл должен лежать в той же папке, что и файл вашей веб страницы (в случае использования вами CMS, первые два варианта вам вряд ли подойдут, хотя для задания фонового изображения в CSS это очень удобно). Во-втором случае, графика лежит во вложенной папке относительно файла вашей страницы, ну, а в третьем случае, в Src указан абсолютный путь до файла с картинкой.
Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.
В этом, кстати говоря, заключается один из способов повышения скорости загрузки. Да и те же самые счетчики посещений, которые вы наверняка будет использовать на своем ресурсе для наблюдения за статистикой посещаемости, тоже будут подгружать свои информеры и скрипты с отличных от вашего хостов.
Как вставить картинку с ссылкой, назначение Alt и Title в Img?
Если Img по своей сути является строчным элементом, то его можно просто считать большой буквой, а значит нам ничто не мешает сделать изображение ссылкой, заключив этот тег внутрь гиперссылки. Вообще, про это я уже достаточно подробно писал в недавней статье про создание гиперссылки в Html коде, но немного повториться будет не грех.
В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:
Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt.
Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.
Но чтобы пользователь имел представление, что на этом месте страницы должна быть картинка, вы и прописываете Alt в Img, где и вводите текст с описанием того, что здесь должно быть изображено. Содержимое Alt будут выводиться в области неподгрузившейся фотографии.
Ну, и кроме этого, для картинок в Html коде, а так же и для других элементов языка гипертекстовой разметки (например, все для тех же гиперссылок) имеется возможность при наведении пользователем на них курсором мыши показывать ему какой-либо сопровождающий текст.
Делается это с помощью специального атрибута Title, который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.
Раньше, кстати, к всплывающей подсказке приводило и добавление текста Alt, но сейчас от такого поведения отказываются и этот атрибут теперь в основном выполняет только роль альтернативного текста, а Title используется исключительно для всплывающих подсказок.
На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.
Для этого нужно не забывать употреблять в них ключевые слова, как я об этом неоднократно писал, например, в статье про продвижение сайта своими силами или же в публикации про то, как раскрутить сайт самому.
Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.
Обтекание картинки текстом в Html — атрибут Align тега Img
Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.
Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках H1-H6 и т.п.).
Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.
Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:
По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:
В этом случае произошло выравнивание текста в строке, где расположена фотография, по верхнему ее краю.
Возможно еще одно значение этого атрибута align=»middle»:
В этом случае текст в строке с картинкой будет выравниваться по середине этого самого рисунка.
Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.
При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.
Например, при align=»left» мы получим такой результат:
Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:
При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.
Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:
Background — как сделать фон для сайта в чистом Html
Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и тегов таблицы Table, показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).
Например, добавив в Body атрибут Background следующего вида:
Мы получим фон для нашего сайта, состоящий из размноженной фотки, которой будет заполнена вся видимая область на манер плитки:
Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor, в качестве значения которого вы может вставить код цвета, например, так:
То получим следующий цвет фона заданный через bgcolor:
Точно так же, как и в случае с атрибутом background, bgcolor можно еще использовать и для задания фона всей таблицы или же отдельных ее элементов.
Внимание! Атрибуты bgcolor и background сейчас не рекомендуются к использованию. Как и другие описанные выше атрибуты, задающие обтекание и отступы. Вместо них нужно использовать соответствующие CSS свойства.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (20)
Такой исчерпывающей и полной информации по картинкам нахожу только здесь. Мой блог moneytime.com.ua давно уже сделал ставку на изображения. И оно того стоит.
Дмитрий, в очередной раз удивляюсь Вашему трудолюбию.
Банально. но сколько я раньше с этим помучалась пока разобралась — так что думаю эта статья много кому поможет.
Тем более как и все что ты пишешь очень грамотно и понятно!
Все забывается,так что думаю еще не раз залезу сюда за подсказкой.
Признайся честно — основную картинку материала сам делал.
Катя: нет, горилла не моя. Супруга коллажик сделала, но уже из готовых фоток.
Хорошее, подробное описание, только тэг img у Вас не закрытый. Для XHTML — это неправильно.
Дмитрий, спасибо огромное за такую подробную и ПОНЯТНУЮ статью! Подскажите, пожалуйста, есть ли у вас на сайте(искала, но, к сожалению не нашла)информация о том, как вставить ВИДЕО на страницу с помощью HTML? Причём, не с YouTube и подобных ресурсов, а просто к себе на сервер и с помощью спец. html-кода. Чтобы этот код работал не только в Internet Explorer, а читался всеми или хотя бы большинством браузеров. Помогите, пожалуйста! Несколько дней ищу подходящую информацию, пока безуспешно:(
Очень спасибо! Просто спасли меня. Доступно, понятно, а главное помогло. Хотя я во всем этом полный ноль. Даже без палочки.
Спасибо за ваши труды-но хотелось бы,чтобы вы добавили в этот пост еще материала о том, как сделать одну картинку ссылкой на несколько источников, т.е. при клике на ее верхнюю часть например картинка ссылалась на яндекс,а при клике на нижнюю на гугл.
Блин часа 3 уже ищу. Как вставить картинку в DIV в коде HTML чтоб она стала фоном ДИВА?
VeX: с помощью CSS свойства background-image
У меня таже проблема, что и у Ирины от 1.03.2012 — не получается вставить видео (с рабочего стола) на страницу сайта.
Ну, все перечислил. А где тег для текста ниже картинки?! Чтож такое везде одно и тоже. Хде тег для текста ниже картинки. Я в ярости
А возможно ли каким-то образом сделать так, чтобы если не подгружается видео на сайте, на этом месте появлялась определённая картинка?
Значение 0 надо включить в кавычки border=»0″
Для того чтоб пройти валидность(http://validator.w3.org/) приведён правильный пример, обязательно alt и в конце через пробел /
Подскажите как реализовать подсветку при наведении на картинку (пример справа рекламный блок, и ссылка на сайт http://buldoors.ru/mastino/). Не первый раз вижу, поэтому хочу у себя на сайте такое. Да и мож кому пригодится.
Вы не подскажите что я делаю неправильно? Хочу поставить две небольшие картинки по краям, а в середине текст.Правая никак не хочет встать на одном уровне с левой. У Вас на блоге всё расписано очень понятно, с примерами, а вот именно моей проблемы нет.
Подскажите как вставить картинку в phpстраницу между этим кодом
возникла такая проблема — при добавлении картинок (через браузер opera) в вордпрессе изображение загружаться стало вот в таком формате:
а раньше было автоматичеки вот в таком виде:
как сделать чтобы загружалось в формате второго варианта, ибо в первом случае не увеличивется картинка после загрузки при нажатии на нее на сайте ((( помогите, пжл!
Обтекание картинки текстом с помощью html и css
Всем привет. В прошлых уроках мы научились вставлять в текст картинки и делать из картинок ссылки. Однако, нерешенной осталась одна проблема. Для того, чтобы страница выглядела красиво и привлекательно, картинка должна обтекаться текстом. Решить эту проблему средствами html и css мы сегодня попробуем.
Как настроить обтекание картинки текстом с помощью html.
Как мы помним, картинка в текст вставляется следующим образом:
Для того, чтобы прижать ее к левому краю страницы, и заставить текст обтекать ее справа мы добавляем в код следующий параметр:
align=»left» />
Как видите, за позиционирование картинки на странице и соответствующие «обтекание» её текстом отвечает атрибут align. Для того, чтобы прижать картинку к правому краю и сделать, чтобы текст обтекал ее слева нужно выставить значение этого атрибута:
Кстати раз уж мы коснулись текста, то рекомендую прочитать статью html теги для оформления текста.
Как настроить обтекание картинки текстом с помощью css.
Данное свойство редко задается напрямую через html. Намного чаще, позиционирование картинки и обтекание ее текстом задается в файле style.css. Это можно сделать, задав изображению класс, и описав этот класс в css.
Класс мы задаем следующим образом.
class=» picture » />
Идентификатор класса » picture » может быть любым. Главное, чтобы он совпадал в html документе и таблице стилей. Собственно говоря, в таблице стилей ( т.е файле style.css) необходимо прописать следующее свойство
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 7px 0; /* Отступы вокруг картинки сверху, справа, снизу, слева соответственно*/
Для того, чтобы сделать выравнивание вправо:
float:right; /* Выравнивание по правому краю */
margin: 7px 7px 7px 0; /* Отступы вокруг картинки сверху, справа, снизу, слева соответственно*/
Ну вот, в общем, и все. Не забывайте писать в комментария насколько вам помогла эта статья, а также ставьте лайки.
Типичный верстальщик
Магия CSS: Обтекание текста вокруг нестандартных форм
Всем привет, меня зовут Анна Блок, я запускаю серию уроков посвященную CSS. Это скорее продвинутый уровень, когда ты уже что-то знаешь о нем. Однако, поверь, в CSS есть еще много интересного и, возможно, в этой серии уроков ты узнаешь что-то новое и захочешь применить в своей работе.
Назовем эту рубрику «Магия CSS». Думаю, это точно описывает то, о чем я буду рассказывать. Освоив эту магию тебя уже не будут пугать макеты дизайнеров, которые решили поддаться своей фантазии, ты сможешь воплотить все что угодно. Эта статья будет посвящена тому, как создать нестандартное обтекание текста. Узнаешь о некоторых свойствах CSS, которые наверняка редко используешь в работе.
Если ты хоть немного прокачан в CSS, то я более чем уверена, что ты знаешь, как решить эти задачи. Например, как сделать обтекание текста вокруг прямоугольной картинки.
Подсказка: безусловно, здесь можно использовать Flexbox или Grid CSS.
Ну и конечно же, наверняка, большинство из вас знают как сделать так, что бы текст продолжался в три колонки, либо на большее их количество.
Задача 1
Первый пример будет посвящен тому, что мы создадим вот такое нестандартное решение.
Этот пример нестандартен тем, что мы создаем некую картинку, которая имеет форму отличную от квадрата и прямоугольника (это то, к чему мы привыкли). Безусловно, здесь не подходит метод, как если бы мы сохранили картинку при помощи png. Я думаю, что многие понимают, что если вы сделаете так, то этот текст не станет по краю, где обрезается эта картинка. Наша же цель, сделать такое обтекание текста, для нестандартной формы.
center — устанавливаем изображение по центру;
top — устанавливаем изображение сверху по оси Y;
no-repeat — без повтора.
Растягиваем изображение по всему контейнеру:
Теперь давайте используем свойство к которому мы все привыкли:
Ознакомиться подробнее с HTML и CSS можно тут:
Задача 2
Теперь давайте сделаем так, что бы наш текст обтекался вокруг круглого изображения.
Задаем размеры изображению:
Ознакомиться подробнее с HTML и CSS можно тут:
Если ты поймешь, как создавать обтекание текстов для таких простых геометрических фигур, как многоугольник, линия, круг и т.п., то безусловно в дальнейшем ты сможешь создавать и что-то более сложное.
Задача 3
Теперь давай поговорим о том, как сделать вот такой пример:
Его фишка в том, что здесь текст как бы обрамляется вокруг некой фигуры которая здесь предложена. В данном случае этой фигурой является круг.
Зададим стили для svg:
Делаем заливку тегу circle :
Добавляем высоту, ширину и внутренние отступы для класса shape :
И теперь поработаем над shape shape-left :
По тому же принципу прописываем стили для shape shape-right
Дело осталось за малым, нам нужно еще немножко поработать над текстом. Используем класс text :
Осталось стилизовать теги h1 и p :
Вот таким методом мы смогли сделать так, что бы в нашем круге оказался текст.
Что было сделано:
Мы создали некую фигуру при помощи HTML-тегов, в данном случае это круг. И далее при помощи свойства shape-outside мы задали некие ограничивающие линии, которые не позволили нашему тексту расползтись по всему сайту.
Ознакомиться подробнее с HTML и CSS можно тут:
Итоги:
Итак, это был первый урок из рубрики «Магия CSS» и сегодня мы поговорили о том, как создать обтекание текста вокруг не стандартных форм.
Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.
Понятие обтекания текста в html документе. Объяснение простыми словами с примерами и пояснениями для новичков
Доброго времени суток, читатели публикации! Все онлайн-ресурсы в своем арсенале используют мультимедийные файлы (изображения, видео и т.д.), которые делают сайт интереснее для пользователей и в некоторых случаях нагляднее презентуют информацию. Поэтому я расскажу вам как сделать обтекание текста html.
В первую очередь вы узнаете, что это за механизм и зачем он нужен. А после прочтения статьи сможете ловко оперировать полученными знаниями и корректировать расположение картинок на своем веб-ресурсе. Пожалуй, приступим!
Что означает «обтекание» и для чего оно используется?
Для начала разберемся с самим термином «обтекание».
На одной веб-странице может быть собрана информация разных форматов: текстовая, графическая, анимационная и т.д. Веб-дизайнеры или разработчики определенным образом ее систематизируют и распределяют по экрану для последующего удобного пользования ею читателями.
Я уверен, что каждый из вас видел, как какое-либо изображение находится внутри текстового контента или наоборот располагается сбоку от других объектов. Такой принцип размещения информации называется обтеканием.
Например, рисунок, который со всех сторон окружают предложения, говорят: «Изображение, обтекаемое текстом».
Разновидности обтекания текстом
В зависимости от вашего персонального желания, обтекание изображений можно установить абсолютно разным: слева, справа, со всех сторон, расположить картинку строго по центру и обрамить ее контентом только сверху и снизу. И таких вариантов бесконечное множество.
Для того чтобы легко форматировать информационное наполнение веб-страниц, вам необходимо знать некоторые встроенные инструменты языков html и css.
| Атрибут | Предназначение |
| align | Задает расположение рисунка на странице и соответственно стороны обтекания его контентом. |
| hspace | Отвечает за отступ от границы изображения до блока с текстом по горизонтали. |
| vspace | Отвечает за отступ от границы изображения до блока с текстом по вертикали. |
| src | Через него указывается анкор на графический ресурс. |
| alt | В случае невозможности отобразить картинку высвечивается текст, вписанный в этот параметр. |
Теперь я представлю шаблон кода, который мы будем использовать во всех примерах:
Если запустить пример в браузере на данном этапе, то вслед за картинкой пойдут предложения абзаца. Чтоб этого не было, я воспользуюсь описанными выше параметрами и сдвину изображение вправо, отступив по горизонтали 10 единиц.
Добавьте к текущему объявлению тега атрибуты align=»right» vspace=»0″ hspace=»10″.
У вас должна сформироваться вот такая строка:
Следующим механизмом перемещения картинки по странице и установки способа обтекания контентом является свойство float. С его помощью изображение можно двигать по горизонтали (right и left) или задавать значения объекта-предка (inherit).
Чтобы опробовать float на практике, необходимо вернуть объявлению тега первозданный вид (
) и после элемента вставить код:
Здесь расположен текст о милейшем создании – тигренке, который изначально по размерам напоминает домашних котов. Однако со временем он достигает почти 300 килограмм.
Обтекание картинки текстом — HTML и css
Обновлено: 4 апреля 2020
Первый вариант
Заключите нужное изображение в тег div, затем откройте файл CSS и придайте ему вот это значение: float: left (right = лево-право на ваше усмотрение) и проставьте нужные отступы.
Второй вариант
Присвойте нужному изображению класс. В CSS добавьте поля float: left (right). Margin: 15px 15px 15px 0 — длина отступа: сверху, справа, снизу (отступ к которому прижимается текст к картинке, по умолчанию равен нулю). Случается, что нужно оформить несколько изображений на одной странице. К примеру, изображения находятся в посте. В коде страницы он отображается приблизительно вот так:
В файле CSS, в этом примере необходимо дописать:
.content img <
float: left;
margin: 10px 10px 10px 0;
>
После этого, все картинки в элементе «content» будут отображаться с заданными вами отступами. А если понадобиться одну картинку выставить по-другому — задайте id (id=your_img), а в CSS допишите:
#your_img <
float: right;
margin: 5px 0 5px 5px;
>
Как наложить на картинку текст
Иногда нужно написать текст прямо на изображении, что-то ввиде анонса или назвния. Как и в прошлом случае способов несколько:
Первый вариант
Сделайте блок, вставьте в него текст, саму картинку сделайте фоном данного блока.
.my_block <
(фон-картинка): url (your_image.jpg) — адрес изображения top left no-repeat;
(ширина): 300px;
(высота): 200px;
(заполнение): 250px 1 1 1;
>
Этот вариант подойдёт и для логотипа, и для шапки.
Второй вариант
Сразу создать два блока, первый с картинкой, второй с текстом (сделайте полупрозрачный фон). И наложить один на другой задав необходимые параметры.
.img <
(ширина изображения): 300px;
(высота изображения): 200px;
(заполнение): относительное;
>
.text <
background-color (цвет фона): #AAA;
(ширина): 300px;
(высота): 30px;
(положение): абсолютное;
(влево): 0px;
(вправо): 500px;
>
В этом примере первый блок размещен внутри второго при помощи свойства под названием position. У блока с текстом задан нужный фон и сам внедрён в нижнюю часть картинки.
На самом деле здесь нет ничего сложного. Сделать красивое обтеканием текстом, а также наложить нужные слова на изображения достаточно просто. Необходимо немного времени. чтобы вникнуть во все эти тонкости и внимательно следовать приведённым ниже инструкциям.
Не бойтесь экспериментировать с дизайном, делайте ваш сайт ещё красивее, подбирайте лучший вариант, и тогда ваш сайт, и вы как его владелец добьётесь успеха.
HTML обтекание картинки текстом – Обтекания HTML текста по картинке
Как настроить обтекание изображения текстом в HTML или CSS. Примеры и практические советы.
1. Обтекание с помощью стилей тега
где VALUE может принимать значения
html > body > p > text text text text text text img align =” left ” src = “foto1.jpg “> text text text text text text /p > body > html >
Вот как это будет выглядеть на странице:
Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.
Вариант 1.1. Через свойство CSS — hspace и vspace
Для этого в атрибутах тега добавляем два значения:
img hspace =” 10 ” vspace =” 10 ” align =” left ” src =” foto1.jpg “>
Вот как это будет выглядеть на странице:
Атрибут hspace задает горизонтальный отступ в пикселях, vspace – соответственно вертикальный
Вариант 1.2. Через свойство CSS — padding и margin
Для этого в атрибутах тега добавляем два значения:
img style =” margin:10px 10px 0px 0px ” align =” left ” src =” foto1.jpg “>
Вот как это будет выглядеть на странице:
Использование свойства float вместо align
float : right; // Выравнивание по правой стороне float : left; // Выравнивание по левой стороне
Например, если написать в предыдущем примере вывод картинки следующим образом:
img style =” margin : 10px 10px 0px 0px ; float : right ;” src =” foto1.jpg “>
То это преобразуется в следующее:
Благодаря float можно задавать единый class для картинок, что очень даже удобно.
Как сделать обтекание картинки текстом
С помощью свойства float можно выровнять изображение по левому (img
Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin.
Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p
Также можно расположить изображение по центру страницы img
List of towns in England
Amersham
Amersham is …
Buxton
Buxton is …
Chesterfield
Dartmouth
Dartmouth is …
Что означает «обтекание» и для чего оно используется?
Для начала разберемся с самим термином «обтекание».
На одной веб-странице может быть собрана информация разных форматов: текстовая, графическая, анимационная и т.д. Веб-дизайнеры или разработчики определенным образом ее систематизируют и распределяют по экрану для последующего удобного пользования ею читателями.
Я уверен, что каждый из вас видел, как какое-либо изображение находится внутри текстового контента или наоборот располагается сбоку от других объектов. Такой принцип размещения информации называется обтеканием.
Например, рисунок, который со всех сторон окружают предложения, говорят: «Изображение, обтекаемое текстом».
Плавающие элементы
Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:
Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).
Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен “плавать”, всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.
Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он “плавает” на странице.
Поскольку плавающий элемент был исключён из общего потока, то остальные блочные элементы, расположенные в коде после него, загружаются на страницу так, будто этого элемента там и не было. Обратите внимание, что блочные элементы располагаются под плавающим элементом, это происходит потому, что плавающий элемент больше не является частью общего потока.
Если вы внимательно посмотрите на рисунок, то увидите, что в отличие от блочных, при размещении строчных элементов или простого текста, расположенного внутри блочного элемента, учитываются границы плавающего элемента, поэтому строчные элементы и текст обтекают его.
Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
С помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку по правой и нижней стороне.
Как сделать Обтекание Картинок и Видеороликов текстом?
Здравствуйте, дорогие друзья и читатели — Sozdaiblog.ru!
В этой статье Вы узнаете, как сделать HTML обтекание картинки текстом, а на десерт я покажу, как применить такой же эффект к видеоматериалам Вашего ресурса.
Не знаю почему, но половина разработчиков шаблонов для WordPress, при их создании игнорируют вставку функции обтекание картинки текстом. Сделано это специально или нет, мне узнать не удалось. Зато, нашлось лекарство для лечения этого недуга.
Как сделать HTML обтекание картинки текстом.
Если, разработчик шаблона для вордпресс поленился довести до ума своё детище, то при вставке изображения в тело поста оно будет выглядеть следующим образом:
Конечно, это смотрится не очень красиво. Поэтому, нам нужно сделать обтекание картинки текстом.
Для этого, откройте папку с Вашей активной темой оформления, найдите файл — « style.css » и в самом конце добавьте кусок нового кода:
Теперь, всем изображениям добавятся новые стили, и они будут выглядеть так:
Как сделать HTML обтекание видеороликов текстом.
При вставке видеоматериала в тело поста, с ним происходит та же беда, что и с картинками. Как и картинки, видео не обтекается текстом. На деле, это выглядит так:
Чтобы это исправить, открываем на редактирование уже знакомый файл — « style.css » и в самом конце добавляем новый стиль:
Теперь, при размещении нового видеоматериала, нужно, в WordPress открыть HTML-редактор и обернуть его код следующим образом:
После этих манипуляций, вновь вставленное видео, будет отображаться намного симпатичнее:
Вот такие простые способы помогут решить проблемы с обтеканием картинок и видеоматериалов Вашего ресурса печатным текстом.
Если, Вы знаете другие варианты, как сделать HTML обтекание картинки текстом, то обязательно напишите о них в комментариях.
Так же Вам понравится:
Всем кому понравилась статья, предлагаю подписаться на обновления блога, чтобы получать уведомления о выходе нового материала на свой адрес электронной почты.
Картинка в тексте html: Обтекание картинки текстом
Обтекание блока и картинки текстом. Отмена обтекания
Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.
Плавающие элементы
Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:
Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).
Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. 
Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.
Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он «плавает» на странице.
Поскольку плавающий элемент был исключён из общего потока, то остальные блочные элементы, расположенные в коде после него, загружаются на страницу так, будто этого элемента там и не было. Обратите внимание, что блочные элементы располагаются под плавающим элементом, это происходит потому, что плавающий элемент больше не является частью общего потока.
Если вы внимательно посмотрите на рисунок, то увидите, что в отличие от блочных, при размещении строчных элементов или простого текста, расположенного внутри блочного элемента, учитываются границы плавающего элемента, поэтому строчные элементы и текст обтекают его. 
Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
Для создания пустого пространства между картинкой и текстом, обтекающим ее, нужно добавить к картинке внешние отступы. 
Поскольку картинка смещена к левой границе родительского элемента, достаточно будет добавить внешние отступы только справа и снизу, чтобы слегка отодвинуть от нее текст:
Отмена обтекания
Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear, которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий. 
Для CSS свойства clear можно установить одно из значений:
Текст возле картинки.
В этой главе мы научимся управлять текстом возле картинки. Т.е. изучим обтекание картинки текстом и научимся прерывать обтекание.
Давайте начнем с расположения текста возле картинки. Давайте создадим новый документ grafika_2.html:
только вы текста вставте побольше, символов 200-500. просмотрим(откроется в новой вкладке) что у нас получилось.
Текст по умолчанию располагается по нижней линии картинки и то только одна строка, остальные переносятся под картинку.
Но эти умолчания можно изменить если задать атрибуту ALIGN нужное значение:
align=»bottomtop» текст по верхней линии картинки
align=»middle» текст по центру картинки
align=»bottom» текст внизу картинки
Не знаю зачем это нужно, не зависимо какой атрибут мы зададим и зададим ли вообще, но все равно только одна строчка будет расположена вокруг картинки, а остальные будут перенесены под картинку.
Чтобы текст не переносился нужно значение атрибуту ALIGN задавать right или left. 
Задавать можно одной картинке только один раз этот атрибут, второй и следующие просто игнорируются.
У тега IMG есть еще полезные атрибуты:
vspace— атрибут который задает расстояние в пикселях от картинки к тексту по вертикали;
hspace — атрибут задает расстояние между текстом и рисунком, но по горизонтали.
А что делать если картинка большая,а текста возле нее нужно всего немного?
Можно конечно «играться» тегом BR, подставлять их 2, 3, 5, 10 или 20 штук, но у этого тега как раз для таких случаев есть прекрасный атрибут clear, который принудительно обрывает обтекание картинки текстом.
Атрибут clear может принимать следующие значения:
прерывает все обтекание;
прерывает обтекание слева;
прерывает обтекание справа.
Обтекание картинок html-списками
Обтекание картинок html-списками
Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) – float:left;, текст списка обтекает её справа, как на скриншотах. При обтекании картинки, бу́ллеты (нумерация, маркировка) списка наползают на изображение и получается трабл (
Налезание нумерации (буллетов) списка на картинку Напрашивается простой способ подправить ситуацию – увеличить отступ (margin) у картинки до тех пор, пока бу́ллеты списка не «слезут с неё»
Увеличение отступа (margin) у картинки до тех пор, пока буллеты списка не слезут с неё В случае простого увеличения отступа (margin) у рисунка, вместе со списком – «уезжает» вправо и обычный текст
Оставим картинку в покое и займёмся списком, за пределы которого вылезает его маркировка. 
Корень проблемы кроется в редко используемом свойстве элемента списка list-style-position. Это свойство определяет положение (размещение) маркеров списка относительно его текста. list-style-position имеет два значения: outside – маркер (бу́ллет) находится за границей элемента списка, как отдельный независимый объект и inside – маркер расположен внутри элемента (маркер встроен в элемент и обтекается его текстом).
Значение list-style-position по умолчанию, для всех браузеров – outside. Маркер находится за границей элемента списка, как отдельный независимый объект. Вот потому-то он и «лезет» на нашу картинку. Margin (отступ) картинки «упирается рогом» непосредственно в текст списка, а бу́ллеты «зависают» за его пределами и попадают на поле изображения. Радикально меняет обстановку с обтеканием рисунка списком предлагаемый CSS-код:
Перед началом работы со списком по данной теме, неплохо ему задать рамку — свойство border:2px solid #000; Перед началом работы со списком по данной теме, неплохо ему задать рамку (свойство border:2px solid #000;). Это позволит наглядно увидеть расположение бу́ллетов «до» и «после» редактирования.
Обтекание изображения списком без маркеров (буллетов). Свойство overflow: hidden; задано для всего спискаОбтекание картинки списком без маркеров (буллетов). Свойство overflow: hidden; задано для каждого элемента списка
Интересный эффект обтекания картинки даёт простое использование для списка CSS-свойства overflow: hidden;. 
В этом случае – обтекание выполнится нормально, но у списка будут отсутствовать маркёры (бу́ллеты). Иногда, именно такой эффект и требуется получить. Пример кода для обтекания рисунка списком, с простым overflow: hidden;
Код CSS для элементов списка
(глобально, для всей страницы):
li
Код CSS для всего списка
(глобально, для всей страницы):
ul,ol
Подобные извращения с overflow: hidden; навеяны вышестоящим кодом. На самом деле, такого-же эффекта можно достичь простым list-style: none; Это CSS-свойство убирает маркеры списка без всяких там «обрезаний». Кроме этого, свойство list-style: none; работает в любой ситуации, тогда как overflow: hidden; – только в сочетании с list-style-position: outside; – когда бу́ллеты списка находятся за пределами текста списка.
Списки в HTML (XHTML)
Оформление списков в html
Интернетчик: HTML, сайт, интернет
HTML: Картинка в тексте | Практика HTML
Часто, бывает нужно вставить картинку в текст. 
Но работает это не всегда так, как мы это задумывали. Попробуем вставить картинку без стилей и посмотрим, что получится.
Код примера предельно прост:
А вот что получилось:
Как видите, картинка стала частью первой строки текста. Нам редко нужно, чтобы поведение было именно таким. Чаще нам необходимо сделать так, чтобы картинка обтекалась текстом. Для этого существует свойство float.
Добавим к нашему примеру float: left и посмотрим, что получится
А получилось у нас следующее:
Здесь мы видим, что картинка стала обтекаться текстом. Правда, из-за того, что текста много, мы не видим одного подводного камня этого решения. Давайте уберём последние два абзаца и посмотрим, что будет:
Обратите внимание, что-то пошло не так и даже абзац, не относящийся к примеру, всё равно обтекается картинкой. Явно не то, чего мы ожидали. Всё дело в том, что флоаты (поплавки) «всплывают» над родительским элементом, поэтому его высота больше не зависит от нашей картинки.
Для того, чтобы исправить подобное поведение, нужно воспользоваться «очисткой» — clear. 
Изменим наш код следующим образом:
Теперь картинка не вылезает за серый фон примера:
Добавив такой чистящий элемент в самый конец родительского контейнера, мы смогли вернуть высоту контейнера к нормальному уровню.
В предыдущих примерах мы увидели, как задать обтекание картинки текстом так, чтобы картинка оказалась слева. Точно так же мы можем обтекать её и с другой стороны.
И если мы не уверены, что текста будет достаточно, не забудем добавить в конец контейнера clear: both.
Подведём итоги. Для того, чтобы вставить картинку в текст и сделать так, чтобы она обтекалась, нужно воспользоваться свойством float, а для того, чтобы восстановить размер контейнера в том случае, если картинка стала вылезать за его пределы, нужно использовать свойство clear.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github. 
com/Artik-Man/HTML-Practice/issues
Как правильно написать alt-текст — Блог HTML Academy
Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.
Когда alt-текст нужен
Как правильно писать
Примеры использования
Картинка
Так можно описать, если в статье есть текст, который рассказывает о фотографии.
Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:
Ссылка
Диаграмма
Если текста со статистикой нет, то придётся всю статистику вынести в alt :
Картинка с текстом
Просто переносим текст в alt :
Figure и figcaption
Когда alt-текст не нужен
Когда картинка декоративная и не имеет смысла. 
Как не стоит писать
Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).
Что будет, если забыть про alt-текст
Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.
Чаще всего в такой ситуации вообще удаляют alt :
Искусственный интеллект и alt
ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Можно ознакомиться в Фейсбуке, Инстаграме или Гугл-картинках.
Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».
С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.
Alt-текст — капля в море фронтенда
Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −30% на подписку в первую неделю. 
Нажатие на кнопку — согласие на обработку персональных данных
Литература
Как окружить фото текстом и задать отступы текста от картинки
26.12.09 Секреты верстки сайтов
Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.
Способ 1: Вписываем код отступа текста для отдельной картинки или фотки
Простой способ задания обтекания картинки текстом, не требующий знаний html и css.
Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. 
Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:
alt=»Здесь_подсказка_если_картинка_не_загрузлась» title=»Здесь_встплывающая_над_картинкой_подсказка»
height=»высота_ картинки_в_точках_числом»
align=”left”
style=»margin: 3px 12px 0px 0px;» />
Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:
web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg» alt=»» /> alt=»Задаем отступ текста для фото»
title=»Задаем отступ текста для фото»
width=»300″
align=»left»
style=»margin: 3px 12px 0px 0px;» />
картинка будет прижиматься к правому краю, а текст слева будет подходить к ней вплотную.
Отступ текста от краев картинки в данном случае задается css-стилем
margin: 3px 12px 0px 0px;
Параметры отступа здесь указываются по часовой стрелке, начиная с отступа картинку сверху (3px), затем отступ от картинки справа (12px) и т.д.
Способ 2: Задаем отступы сразу для всех картинок в блоке одним классом css
Для использования этого способа понадобятся некоторые знания основ верстки сайтов и желание копаться в исходниках. 
Если фотографии или другие изображения нужно вставлять в тексты статей постоянно, при этом отступы между картинками и текстом всегда одни и те же, нет смысла прописывать стиль css для каждой картинки отдельно. Намного удобнее один раз описать отступы от картинки для текста и других изображений, размещенных в таком блоке. Классический вариант – вставка иллюстраций в текст статьи своего блога.
Для начала находим имя класса css, который описывает блок текста статьи, в html-коде страницы. Рекомендую открыть код страницы из браузера, найти там текст статьи с картинками, которым мы хотим задать отступы, и найти название класса css, который описывает стиль для текста статьи. Убедитесь, что этот css-класс не задает стиль заголовка, шрифт категории или еще что, а касается именно текста статьи:
Далее, в основном файле стилей css (обычно style.css) находите имя нужного класса (на примере его имя entry) и добавляете в файл описания стилей дополнительный класс, задающий поведение картинок (IMG) в нужном блоке:
. 
entry img <
margin: 3px 12px 0px 0px;
>
Обратите внимание на обязательную точку перед именем класса (у вас он, вероятно, будет называться не entry, как в моем шаблоне WordPress), пробел между именем css-класса и словом img, которое означает, что все инструкции класса относятся только к картинкам, находящимся внутри блока entry.
Числа, задающие отступ от картинки для текста и других изображений в статье, естественно, можно ставить свои. Первый параметр после дерективы margin задает отступ картинки сверху, далее отступ справа, затем отступ снизу и последний параметр – отступ картинки от правого края.
После изменения своего файла стилей с расширением .css его следует перезалить на свой сайт по ftp. В результате автоматически изменится отступ для всех картинок во всех статьях сайта/блога, стиль которых задается измененным css-классом.
В раскрутке блога сегодня помогают:
Если вас, как и меня, интересует продвижение сайта, но вам лично заниматься этим лень — стучитесь к профессионалам и готовьтесь отбиваться от клиентов. 
Читайте также:
Как убрать обтекание текстом картинки?
Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель – предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.
Постановка задачи
Написание какой-либо статьи для вашего информационного ресурса или блога не редко будет сопровождаться вкраплением по ходу изложения текста картинок. Так как поисковый робот всегда уважал наличие картинок на сайте, да и пользователя больше порадует текст с яркими изображениями. Отсюда вытекает потребность в установке особого способа форматирования, который обеспечит красивое взаимодействие текста и картинки.
Рассмотрим тот случай, когда обтекание текстом не требуется. Причем предлагаю универсальный вариант – при отсутствии картинки текст растягивается на всю ширину блока (не все же Ваши статьи будут сопровождаться иллюстрациями). 
Ширина блока с текстом строго не фиксирована. Ниже показано, как должен будет выглядеть наш блок.
Правильное решение
Для реализации поставленной задачи создаем два блока: один для картинки, второй – для текста. С учетом того, что под картинкой может располагаться еще какие-либо элементы, для картинки мы создаем отдельный контейнер, в противном случае этого не требуется, можно просто присвоить тегу с изображением необходимый класс.
Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:
Вполне логично будет предложить присвоить и тексту свойства плавающего объекта. При не установленных значениях ширин объекта получим такую картину
Чтобы избежать такого эффекта, просто нужно указать значения ширины текстового блока, но это не соответствует условиям нашей задачи. 
Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left. Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!
А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока – необходимо обратиться к свойству overflow со значением hidden. Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).
Таким образом, мы пришли к правильному решению, которое приведет к эффекту, указанному на картинке в подразделе, в котором описывались условия нашей задачи. 
Недостатки метода и альтернатива
Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden, есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.
В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell;. Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower
И это решение обладает своими особенностями, которые нужно учитывать при верстке. Если текстовая часть будет достаточно короткой, то следующий блок будет выводится справа от блока с классом text. Чтобы этого избежать необходимо текстовый блок и картинку заключить в отдельный контейнер.
В каких браузерах работает?
Оценок: 5 (средняя 5 из 5)
Понравилась статья? Расскажите о ней друзьям:
Обтекание текста вокруг картинки HTML + CSS
Основном такой вид можно наблюдать в самом материале, где главное изображение установлено в левом верхнем углу, а по правую сторону начинается описание, и когда оно доходит до самого низа поставленного снимка, то происходит обтекание. Чтоб оно было красивым, здесь нужно изначально задать отступы, чтоб они были одинаковы по всем сторонам, в нашем случай задействовано 2 стороны. Что по оформлению, то можно сделать красивую рамку, где если идет светлый формат, то добавить немного теней, но слишком не усердствовать, так чтоб они не попадали она знаки текста.
Приступаем к установке:
Здесь идет описание материала.
Как видим не чего сложного нет, все делается в стилистике CSS, где задаем класс и под него идет настройка.
Также есть похожий материал, где возможно этот больше подойдет под установку.
Здесь как можно заметить, что от первого метода немного больше есть настроек, которые будут отвечать за расстояние между картинкой и описанием.
Как сделать обтекание плеера текстом
Вероятно вам попадались и такие статьи, где вместо картинки шел плеер, а обтекание было аналогичным по виду. Что как поняли можно сделать, но там уже немного по другому, что также давайте рассмотрим.
Описание под материал
Где в аналогичном порядке ставим отступы, как вы видите на своем сайте.
Источники информации:
- http://ktonanovenkogo.ru/html/html-new/img-vstavka-kartinki-v-html-src-obtekanie-tekstom-fon-dlya-sajta-background-razmer-izobrazhenij.html
- http://www.bestseoblog.ru/obtekanie-kartinki-tekstom/
- http://tpverstak.ru/wrapping-content-around-images-css-shapes/
- http://romanchueshov.ru/osnovyi-html/ponyatie-obtekaniya-teksta-v-html.html
- http://wp-club.ru/article/obtekanie-kartinki-tekstom-html-i-css/
- http://skolkocom.ru/info/html-obtekanie-kartinki-tekstom-obtekaniya-html-teksta-po-kartinke
- http://sozdaiblog.ru/dizayn-bloga/deny-102-kak-sdelaty-obtekanie-kartinok-i-videorolikov-tekstom.html
- http://ylianova.ru/html/kartinka-v-tekste-html-obtekanie-kartinki-tekstom.html
- http://zornet.ru/load/obtekanie_teksta_vokrug_kartinki_html_css/145-1-0-9016