Kombinimi i float dhe margin në CSS

Tani teksti ynë është i shtypur nga ana e majtë e figurës. Le të përpiqemi ta largojmë pak këtë tekst. Për këtë, do t'u caktojmë paragrafëve tanë margin majtas prej 30px, ndërsa div-it prind - një kufi të kuq.

Papritmas, vetëm teksti që është ngjitur me div-in prind do të largohet djathtas, ndërsa teksti ngjitur me figurën - nuk do të largohet:

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

Për të kuptuar pse ndodh kështu, le t'u shtojmë paragrafëve një kufi jeshil:

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

Siç e shohim, në fakt paragrafët largohen nga buza e majtë, por jo nga figura, por nga div-i prind. Për ta shqyrtuar më në hollësi, le t'i shtojmë figurës gjysmë-transparencë përmes vetisë 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;
}

Tani duket qartë se ka reagim ndaj margin-left, vetëm se paragrafët në fakt janë vendosur nën figurë. Le të heqim hapësirën, por ta lëmë figurën gjysmë-transparente:

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

Kështu duken në të vërtetë paragrafët tanë - teksti i tyre është larguar nga figura, por fizikisht paragrafët shtrihen nën figurë, kjo duket nga kufiri i të cilit fillon nga buza e majtë e div-it prind.

Le të kthejmë margin dhe ta fusim figurën brenda paragrafit të parë:

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

Tani figura lëviz së bashku me paragrafët!