A float és margin kombinálása CSS-ben

Jelenleg a szövegünk a bal oldalról van illesztve a képhez. Próbáljuk meg egy kicsit eltolni ezt a szöveget. Ehhez adjuk meg a bekezdéseinknek bal oldali margin-et 30px-ben, a szülő div-nek pedig piros szegélyt.

Váratlanul csak az a szöveg tolódik el jobbra, amely a szülő div-hez ér, azonban a képhez illeszkedő szöveg nem mozdul el:

<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;
}

Hogy megértsük, miért van ez így, adjunk a bekezdéseknek zöld szegélyt:

<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;
}

Amint látjuk, valójában a bekezdések a bal széltől távolodnak el, de nem a képtől, hanem a szülő div-től. Hogy részletesebben megvizsgálhassuk, adjunk hozzá átlátszóságot a képnek a opacity tulajdonság segítségével:

<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;
}

Most már pontosan látszik, hogy van reakció a margin-left-re, csak a bekezdések valójában a kép alatt helyezkednek el. Távolítsuk el a margót, de hagyjuk meg a kép félig áttetszőségét:

<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;
}

Így néznek ki valójában a bekezdéseink - a szövegük a kép miatt el van tolva, de fizikailag a bekezdések a kép alatt helyezkednek el, ez látható a szegélyen, amely a szülő div bal szélétől indul.

Térjünk vissza a margin-hez és tegyük a képet az első bekezdésbe:

<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;
}

Most a kép a bekezdésekkel együtt mozog!