Kombinasie van float en margin in CSS

Tans word ons teks teen die prentjie aan die linkerkant gedruk. Kom ons probeer om hierdie teks 'n bietjie te verskuif. Om dit te doen, sal ons vir ons paragrawe 'n linker margin van 30px toewys, en vir die ouer-div - 'n rooi rand.

Onverwags sal slegs die teks wat teen die ouer-div aanleun na regs beweeg, terwyl die teks wat teen die prentjie aanleun - nie sal verskuif nie:

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

Om te verstaan waarom dit so is, laat ons 'n groen rand by die paragrawe voeg:

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

Soos ons kan sien, beweeg die paragrawe eintlik weg van die linkerkant, maar nie van die prentjie nie, maar van die ouer-div. Om dit in meer detail te beskou, laat ons ook semi-deursigtigheid by die prentjie voeg deur die eienskap opacity te gebruik:

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

Nou is dit duidelik sigbaar dat daar wel 'n reaksie op margin-left is, slegs dat die paragrawe eintlik onder die prentjie geplaas is. Laat ons die inspringing verwyder, maar die semi-deursigtigheid van die prentjie behou:

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

So lyk ons paragrawe eintlik - hul teks is deur die prentjie weggedruk, maar fisies lê die paragrawe onder die prentjie, dit is sigbaar aan die rand wat by die linkerkant van die ouer-div begin.

Laat ons die margin terugbring en die prentjie in die eerste paragraaf sit:

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

Nou beweeg die prentjie saam met die paragrawe!