Kombinacija float i margin u CSS-u

Trenutno je naš tekst pritisnut uz sliku sa leve strane. Pokušajmo malo da odmaknemo ovaj tekst. Za to ćemo postaviti levi margin od 30px našim paragrafima, a div-u-roditelju - crvenu granicu.

Iznenada će se udesno odmaknuti samo tekst koji je uz div-roditelj, a tekst koji je uz slicu - neće se odmaknuti:

<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 bismo razumeli zašto je to tako, dodajmo paragrafima zelenu granicu:

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

Kao što vidimo, zapravo se paragrafi odmiču od levog ivica, ali ne od slike, već od div-roditelja. Da bismo detaljnije razmotrili, dodajmo još i poluprovidnost slici kroz svojstvo 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;
}

Sada je sasvim jasno vidljivo da reakcija na margin-left postoji, samo su paragrafi zapravo smešteni ispod slike. Uklonimo margine, ostavljajući pritom poluprovidnost 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 zapravo izgledaju naši paragrafi - njihov tekst je odmaknut od strane slike, ali fizički paragrafi leže ispod slike, što se vidi po granici koja počinje od levog ivice div-roditelja.

Vratimo margin i ubacimo sliku u prvi 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;
}

Sada se slika kreće zajedno sa paragrafima!