Float un margin kombinācija CSS

Pašlaik mūsu teksts ir piespiests attēlam no kreisās puses. Mēģināsim šo tekstu nedaudz attālināt. Lai to izdarītu, iestatīsim mūsu rindkopām kreiso margin uz 30px, bet vecāka div - sarkano apmali.

Pēkšņi pa labi attālināsies tikai tas teksts, kurs atrodas blakus vecāka div, bet teksts, kurs atrodas blakus attēlam - neattālināsies:

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

Lai saprastu, kāpēc tas tā notiek, pievienosim rindkopām zaļu apmali:

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

Kā mēs redzam, patiesībā rindkopas attālinās no kreisās malas, bet ne no attēla, bet no vecāka div. Lai izpētītu sīkāk, pievienosim vēl attēla daļēju caurspīdīgumu, izmantojot īpašību 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;
}

Tagad tieši redzams, ka reakcija uz margin-left ir, tikai patiesībā rindkopas atrodas zem attēla. Noņemsim atkāpi, atstājot attēla daļējo caurspīdīgumu:

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

Šādi patiesībā izskatās mūsu rindkopas - to teksts ir attālināts ar attēla palīdzību, bet fiziski rindkopas atrodas zem attēla, to var redzēt pēc apmales, kas sākas no vecāka div kreisās malas.

Atgriezīsim margin un ieliksim attēlu pirmajā rindkopā:

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

Tagad attēls pārvietojas kopā ar rindkopām!