# Сочетание float и margin

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

Неожиданно вправо отступит только тот текст, который прилегает в диву-родителю, а текст, прилегающий к картинке - не отодвинется:

`<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> длинный текст </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; } img { float: left; }`

:

Чтобы понять, почему это так, добавим абзацам зеленую границу:

`<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> длинный текст </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; border: 1px solid green; } img { float: left; }`

:

Как мы видим, на самом деле абзацы отодвигаются от левого края, но не от картинки, а от дива-родителя. Чтобы рассмотреть подробнее, давайте добавим еще и полупрозначность картинке через свойство `opacity`:

`<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> длинный текст </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; border: 1px solid green; } img { float: left; opacity: 0.5; }`

:

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

`<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> длинный текст </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { border: 1px solid green; } img { float: left; opacity: 0.5; }`

:

Вот так на самом деле выглядят наши абзацы - их текст отодвинут картинкой, но физически абзацы лежат под картинкой, это видно по границе, которая начинается от левого края дива-родителя.

Давайте вернем `margin` и засунем картинку в первый абзац:

`<div> <p> <img src="img.png" alt=""> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> длинный текст </p> </div>` `div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; border: 1px solid green; } img { float: left; opacity: 0.5; }`

:

Теперь картинка двигается вместе с абзацами!

←→
↑