Отступ текста от картинки.Йёжа Йежов

Оформление .Отступ текста от картинки

Столкнулся с интересной проблемой .

Не получалось  сделать отступ  текста от картинки в Блоггер,долго искал и наконец нашёл .Вообще заметил , что на многих сайтах и блогах зазора между картинкой и текстом нет .
Смотрится не очень , мягко говоря .Можно,конечно, делать картинку посередине ,а текст сверху и снизу ,но иногда хочется расположить как-то покомпактнее .К тому же если много фото и текста ,страница выглядит очень растянутой ,что не всегда есть хорошо .Хотя -это дело вкуса  .Но с отступом  всё-таки смотрится немножко лучше -сугубо моё мнение , которое ,безусловно можно оспорить.Кстати как правильно располагать картинки можно прочитать здесь .Автор прекрасно рассказывает и показывает.

Пример взят из инета

Как видим здесь отступа нет и текст налипает на картинку .Смотрится не айс явно.Будем с этим бороться .Я нашёл несколько статей на эту тему .Кстати .пытался сделать текст без отступа для демонстрации ,но не получилось -закон подлости .Возможно уже  вбили в шаблон
данный отступ .Но если всё-таки отступа нет ,мы его сделаем .Сами .Своими руками .

Вариант 1

Достаточно простой и без ковыряния в шаблоне.Подойдёт для всех ,особо для новичков и не только . Хотя говорят , что он устарел .Недостаток -надо вставлять в каждую статью по новой, но это можно пережить как-нибудь .Материал взят ЗДЕСЬ И ЗДЕСЬ
Ёжики с отступами ,которых видите слева и справа, сделаны именно с помощью этих формул-кодов ,которые видите ниже. .

<img src="Адрес вашей картинки" align="left"title="Podskazka"width="310px" height="100px" hspace="15"vspace="15">

или Если хотим картинку справа  
<img src="Адрес вашей картинки" align="right"width="310px" height="100px" hspace="15"vspace="15">

 или Если хотим картинку справа c подсказкой и названием
<img src="Адрес вашей картинки" align="right"alt="nazvanie" title="podskazka"width="310px" height="100px" hspace="15"vspace="15">

.

Вместо Адрес вашей картинки ,естественно вставляем свой адрес картинки 
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
hspace="15" – расстояние между текстом и картинкой 15 пиксел по горизонтали h-Horizontal
vspace="15" – расстояние между текстом и картинкой 15 пиксел по вертикали v-Vertical
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию 
center -картинка по центру .Но отступ у меня не получается по центру

.

Вариант 2

В общем-то ненамного и сложнее  первого варианта .ВЗЯТ ЗДЕСЬ.
Вместо hspace и vspace варианта 1 присвоим  класс.

Автор назвал его otstup-1.Ну пусть будет так. Здесь уже надо будет лезть в шаблон .Что cтрашно ? Когда-то же надо начинать!!

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

.

Сохранить свой блог (бэкап-резервное копирование блога.)

.

Это надо делать перед любыми эксперементами

Приступим тогда к ломанию шаблона .
Идём в редактирование блога 

.  
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>

Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .otstup-1 {

  margin: 0px 15px 10px 0px;

}

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код 

 Если картинка слева
<img class="otstup-1" align="left" width="310px" height="100px" alt="Название" src="Адрес ВАшей картинки">
или Если картинка справа
 <img class="otstup-1" align="right" width="310px" height="100px" alt="Название" src="Адрес ВАшей картинки">

   
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

.

 Вариант 3

Добрались с горем пополам до третьего варианта.ВЗЯТ ЗДЕСЬ.
Он не

отличается в установке   от варианта 2 

Автор назвал его primer-2.Значит так его и назовём. Также заходим в шаблон . Уже есть небольшой опыт.Так что боимся меньше 

Но всё равно не забываем

Прежде чем запускать свои шаловливые ручки в шаблон Нужно
.

Сохранить свой блог (бэкап-резервное копирование блога.)

.

Это надо делать перед любыми эксперементами

Приступим .
В принципе всё тоже самое ,разница только в добавляемом коде
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>

Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .primer-2 img {

  margin: 0px 15px 10px 0px;

}

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код

Если картинка слева
<div class="primer-2">

  <img align="left" width="310px" height="100px" alt="Название" src="Адрес ссылки">

  </div>

Если картинка справа
 <div class="primer-2">

  <img align="right" width="310px" height="100px" alt="Название" src="Адрес ссылки">

  </div> 

.
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

.

 Вариант 4

          

Ну вот и четвёртый вариант .Отличия,как 

такового нет  , почти.Конечный результат мы получаем тот же .Ведь нас именно результат интересует ?!

Я не специалист и не очень разбираюсь в преимуществах одного кода над другим .

Но раз автор дал несколько вариантов ,я их прихватил ,прихватизировал, так сказать .

 Установка кода иденчина второму и третьему вариантам ,но всё равно опять расскажу про неё .Повторение мать учения!Так что будем повторять и учиться!!!! И я тоже виесте с вами .Ведь я тоже новичок в блогостроении и тоже учусь .Мы все учились понемногу, Чему-нибудь и как-нибудь .Правда вот не доучились .Ну ,что ж будем добирать недополученное.

Грызть гранит блоговедения .Судьба такой нелёгкий ,однако !

.

ВЗЯТО ЗДЕСЬ.

Прежде чем начнём курочить  наш шаблон Нужно
.

Сохранить свой блог (бэкап-резервное копирование блога.)

.

Это надо делать перед любыми эксперементами

Приступим .
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>

Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .primer-3 img {

  float:left;  

  margin: 0px 15px 10px 0px;

 float:right;  

  margin: 0px 15px 10px 0px;

}

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код 
.

 Если картинка слева
<div class="primer-3">  <img align="left" width="310px" height="100px" alt="Название" src="Адрес ссылки на картинку"></div>

Если картинка справа

 <div class="primer-3">  <img align="right" width="310px" height="100px" alt="Название" src="Адрес ссылки на картинку"></div>

.
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

. .

Вариант 5

Взят здесь


Ещё один вариант отступа .Далее текст автора варианта .

Нужен ли перенос текста, зависит от того, как ваш сайт построен. Блоги, которые используют широкий дизайн, обычно прикрепляют небольшие фотографии, встроенные в текст и опираются на параметры обтекания, чтобы изображения и текст были совместимыми. 

Многие сайты, имеют модульную конструкцию, поэтому им просто необходимо использовать  обтекание текстом, потому что текст и изображения почти полностью состыкованы

 и редко появляются с промежутками.Изображение и выравнивание, также может повлиять на внешний вид обтекания текстом. Обтекание всегда будет казаться лучше, когда будет попадать рядом с текстом (так, чтобы все линии начинались/заканчивались на том же месте). Обтекание проявляется слабее, когда оно находится вместе с «рваным» текстом.

Текст автора варианта вставлен для примера обтекания  текста на данном коде .да и просто полезно почитать
Вставляем в шаблон
.

Прежде чем начнём ломать  наш шаблон Нужно
.

Сохранить свой блог (бэкап-резервное копирование блога.)

.

Это надо делать перед любыми эксперементами

Приступим .
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>

Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем
следующий код
.

.align_left {

    float: left;

    margin-right: 1em;

    margin-bottom: 1em;

}



.align_right {

    float: right;

    margin-left: 1em;

    margin-bottom: 1em;

}



.align_center {

    display: block;

    margin-left: auto;

    margin-right: auto;

}

.

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа 
 Для того ,чтобы Вставить картинку в статью. Пишем вот такой код код

<img src="Адрес картинки" alt="название" class="my-align-class" />

Вставляем свой адрес и название и все .перетягиваем картинку мышкой влево или вправо

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

• CSS Text Wrapper: Generate HTML/CSS to wrap content to any shape or curve
• CSS – Wrapping text around non-rectangular shapes

ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА

Об Авторе