# Сочетание float и padding в CSS

Давайте опять поставим картинку над абзацами, оставив им при этом левый `padding`. В этом случае `padding` отодвинет только тот текст, который прилегает слева к диву-родителю, а не к нашей картинке:

`<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; padding-left: 30px; border: 1px solid green; } img { float: left; opacity: 0.5; }`

:

А теперь положим картинку в первый абзац - она будет двигаться вправо вместе с текстом абзацев:

`<div> <p> <img src="img.png" alt=""> 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; padding-left: 30px; border: 1px solid green; } img { float: left; opacity: 0.5; }`

:

← →
↑