# Отступы плавающему элементу в CSS

Давайте добавим правый `margin` - в этом случае текст действительно отодвинется от правого края картинки:

`<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> long text... </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { border: 1px solid green; } img { float: left; margin-right: 30px; opacity: 0.5; }`

:

Интересный эффект получится, если добавить еще и `margin` абзацам - сами абзацы отодвинутся от левого края дива-родителя, при этом текст в них по-прежнему будет отодвинут от правого края картинки, так как ей задан правый `margin`:

`<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> long text... </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; border: 1px solid green; } img { float: left; margin-right: 30px; opacity: 0.5; }`

:

Скачайте картинку к задаче. Затем повторите страницу по данному образцу:

← →
↑