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

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

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

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

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

http://softvopros.ru/uploads/forum/images/1287919134.jpg

Далее, ищем файл 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 задает отступ нашей картинки сверху, далее отступ  справа (от текста), затем отступ снизу и последний параметр – отступ картинки от правого края (т.е. параметры директивы определятся по часовой стрелке, начиная от верхнего края картинки).

Поделиться