Как задать отступы изображения?

Question

[Dima4jin]

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

Answer 1

[Виталий Киренков]

img { margin: 20px;}
img[align="left"]{ margin-left: 0;}
img[align="right"]{ margin-right: 0;}

Думаю, так.

Comments

[Алексей]

Если бы jsfiddle.net/daLJd/1

[Виталий Киренков]

Сами испортили, то что я написал, вот оно у вас и не завелось.
jsfiddle.net/daLJd/3

Отталкиваемся не от стиля "float", а от тэга "align"

[Алексей]

@DeLaVega пардон. Привык выравнивать изображения "float", соответственно с [aligin=""] не работало, а почему - не обратил внимание))

[Алексей]

Только тогда надо, чтобы редактор использовал "aligin", а не "float", который в большинстве редакторов.

[Виталий Киренков]

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

Answer 2

[Алексей]

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

В противном случае будет работать иерархия, где css-класс перекрывает любой стиль прописанный в самом теге:

.class1
#block1
style=" " - всегда главнее

А в большинстве, если не во всех визуальных редакторах все стили пишутся в теги именно с помощью style=" "
И не думаю что !important как-то спасет.

UPD: обычно все картинки в визуальных редакторах включаются внутрь тегов <p></p>в таком случае вряд ли можно легко решить эту задачу. Думаю если суметь избежать попадания изображений внутрь тегов абзацов, то отступы можно сделать за счет отступов самих абзацов.