1 (2011-01-07 18:46:55 отредактировано SV)

Тема: Как сделать необходимый отступ текста от картинок

Поразительно очень часто встречаются сайты, в новостях которых картинки и текст сливаются друг с другом, т.е. не существует отступа текста от картинок. Непонятно почему, но хозяева сайтов мирятся с этим, или просто не знают, как исправить данную проблему (Так же не понятна и позиция разработчиков (риперов) шаблонов, которые "упускают из вида" такую визуальную погрешность в своих разработках.).

В прочем, исправить такую "ошибку" совсем не сложно.

Для упрощения поиска следует открыть страницу сайта, содержащую текст и картинку в исходном коде. Далее ищем тот кусок кода, который содержит класс, внутри которого находятся и текст и картинка. В моем варианте, показанном на рисунке далее, это класс "indents"

Далее, ищем файл CSS в папке используемого шаблона, в котором описываются правила для этого класса. В моем случае это оказался main.css.

.indents {    padding: 0; margin: 0;    line-height: normal;}

Затем добавляем ниже дополнительный класс, задающий поведение картинок (IMG) в нужном блоке

.indents img {    margin: 3px 12px 0px 0px;}

В итоге должно получиться так:

.indents {    padding: 0; margin: 0;    line-height: normal;}/* отступ текста от картинки */.indents img {    margin: 3px 12px 0px 0px;}

Первый параметр после дерективы margin задает отступ нашей картинки сверху, далее отступ  справа (от текста), затем отступ снизу и последний параметр – отступ картинки от правого края (т.е. параметры директивы определятся по часовой стрелке, начиная от верхнего края картинки).

Поделиться