Обнаружил, что текст с вставленной картинкой, выравненной по левому или правому краю, может быть красиво сверстан с применением в теге картинки одного только атрибута align, но без встроенного атрибута style со свойством margin, задающим отступ от обтекающего текста.
Тупое добавление align="left или style="float:left" выдает такой результат:
Как видите, текст обтекает картинку вплотную, что есть нехорошо. Что я делал раньше, чтобы исправить сиутацию:
Добавлял в тег изображения атрибут style="margin ....", чтобы указать отступы:
<img src="...." align="left" style="margin: 0 10px 5px 0;" .... />
<img src="...." align="left" style="margin: 0 10px 5px 0;" .... />
или просто писал в стиле тега атрибут float, не используя align:
<img src="...." style="float: left; margin: 0 10px 5px 0;" .... />
<img src="...." style="float: left; margin: 0 10px 5px 0;" .... />
В результате изображение обтекалось текстом не вплотную, что радовало глаз:
Теперь знаю, что можно делать намного удобнее:
<img src="...." align="left" .... />
а во внешнем css достаточно прописать следующее:
img[align="left"]{ margin-right: 10px; margin-bottom: 5px; }
Результат такой же, как и в случае с отступами, заданными в теге.
Как говорится, век живи - век учись. Сколько я уже пересмотрел кода CSS, но такого почему-то не встречал до сих пор. Нашел, кстати, в коде стилей хабра, за что благодарен его верстальщикам. Беглый поиск в интернете дает лишь советы, как сделать аналог align="left" с помощью CSS, не влезая в HTML, что всем мало-мальски продвинутым верстальщикам уже давно неинтересно. Так что надесь, что этот пост пригодится многим.
P.S. Увы, но самый нелюбимый верстальщиками браузер этот стиль не понимает. Остается только порадоваться тому, что он сдает свои позиции в пользу более современных.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.