Float ja margin kombinatsioon CSS-is

Praegu on meie tekst vasakult pildi vastu surutud. Proovime seda teksti veidi eemale liigutada. Selleks määrame oma lõikudele vasaku margin väärtusega 30px ja emaelemendile (div) punase piirjoone.

Ootamatult liigub paremale ainult see tekst, mis puutub kokku emaelemendiga, kuid tekst, mis puutub kokku pildiga, ei liigu:

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

Et mõista, miks see nii on, lisame lõikudele rohelise piirjoone:

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

Nagu näeme, tegelikult lõigud liiguvad eemale vasakust servast, kuid mitte pildist, vaid emaelemendist (div). Et seda üksikasjalikumalt vaadata, lisame pildile poolläbipaistvuse omaduse opacity abil:

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

Nüüd on selgelt näha, et reaktsioon margin-left olemas, kuid lõigud asuvad tegelikult pildi all. Eemaldame nüüd taande, jättes pildi poolläbipaistvuse:

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

Nii näevad tegelikult välja meie lõigud - nende tekst on pildi poolt eemale tõugatud, kuid füüsiliselt asuvad lõigud pildi all, seda on näha piirjoonest, mis algab emaelemendi vasakust servast.

Paneme margin tagasi ja paneme pildi esimesse lõiku:

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

Nüüd liigub pilt koos lõikudega!