Combinația float și margin în CSS

Acum textul nostru este lipit de imagine pe partea stângă. Să încercăm să îndepărtăm puțin acest text. Pentru aceasta, să setăm paragrafelor noastre un margin stâng de 30px, iar div-ului părinte - o bordură roșie.

În mod neașteptat, doar textul care se află lângă div-ul părinte se va deplasa spre dreapta, iar textul aflat lângă imagine - nu se va deplasa:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
}
img {
	float: left;
}

Pentru a înțelege de ce se întâmplă acest lucru, să adăugăm paragrafelor o bordură verde:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some 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;
}

După cum vedem, de fapt paragrafele se îndepărtează de marginea stângă, dar nu de imagine, ci de div-ul părinte. Pentru a examina mai detaliat, să adăugăm și semi-transparență imaginii prin proprietatea opacity:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some 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;
	opacity: 0.5;
}

Acum este clar vizibil că reacția la margin-left există, doar că paragrafele sunt de fapt poziționate sub imagine. Să eliminăm margin-ul, lăsând totuși semi-transparența imaginii:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Așa arată de fapt paragrafele noastre - textul lor este îndepărtat de imagine, dar fizic paragrafele se află sub imagine, acest lucru se vede din bordură, care începe de la marginea stângă a div-ului părinte.

Să revenim la margin și să punem imaginea în primul paragraf:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some 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;
	opacity: 0.5;
}

Acum imaginea se mișcă împreună cu paragrafele!