тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Сочетание 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; }

:

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