Gabungan float dan margin dalam CSS

Sekarang teks kita terhimpit ke gambar dari sebelah kiri. Mari kita cuba mengalihkan teks ini sedikit. Untuk melakukan ini, mari kita tetapkan margin kiri sebanyak 30px untuk perenggan kita, dan tetapkan sempadan merah untuk div induk.

Secara tiba-tiba, hanya teks yang bersebelahan dengan div induk yang akan berundur ke kanan, manakala teks yang bersebelahan dengan gambar tidak akan beralih:

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

Untuk memahami mengapa ini berlaku, mari tambahkan sempadan hijau untuk perenggan:

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

Seperti yang kita lihat, sebenarnya perenggan-perenggan itu dialihkan dari tepi kiri, tetapi bukan dari gambar, melainkan dari div induk. Untuk melihat dengan lebih terperinci, mari kita tambahkan juga sifat lutsinar separa untuk gambar melalui sifat 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;
}

Sekarang barulah jelas kelihatan bahawa terdapat tindak balas terhadap margin-left, hanya perenggan sebenarnya terletak di bawah gambar. Mari kita buang jarak, sambil mengekalkan sifat lutsinar separa untuk gambar:

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

Beginilah sebenarnya rupa perenggan kita - teksnya dialihkan oleh gambar, tetapi secara fizikalnya perenggan-perenggan itu terletak di bawah gambar, ini dapat dilihat pada sempadan yang bermula dari tepi kiri div induk.

Mari kita kembalikan margin dan masukkan gambar ke dalam perenggan pertama:

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

Sekarang gambar bergerak bersama-sama dengan perenggan!