Kombinacija float in margin v CSS

Trenutno je naš tekst prilepljen k sliki na levi strani. Poskusimo ta tekst nekoliko odmakniti. Za to bomo našim odstavkom nastavili levi margin na 30px, divu-staršu pa rdeč obrob.

Nepričakovano se bo v desno umaknil le tisti tekst, ki meji na div-starša, medtem ko se tekst, ki meji na sliko, ne bo premaknil:

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

Da bi razumeli, zakaj je temu tako, dodajmo odstavkom zelen obrob:

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

Kot vidimo, se odstavki dejansko odmikajo od levega roba, vendar ne od slike, temveč od div-starša. Za podrobnejši pregled dodajmo sliki še polprosojnost z lastnostjo 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;
}

Zdaj je jasno vidno, da je odziv na margin-left prisoten, vendar so odstavki dejansko nameščeni pod sliko. Odstranimo odmik, a obdržimo polprosojnost slike:

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

Tako dejansko izgledajo naši odstavki - njihov tekst je odrinjen s strani slike, vendar fizično ležijo odstavki pod sliko, kar je razvidno iz obrobe, ki se začne od levega roba div-starša.

Vrnimo margin in denimo sliko v prvi odstavek:

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

Zdaj se slika premika skupaj z odstavki!