Kombinasi float dan margin dalam CSS
Saat ini teks kita menempel pada gambar dari sisi kiri.
Mari kita coba sedikit menjauhkan teks ini.
Untuk melakukan ini, mari berikan margin kiri sebesar 30px pada paragraf kita,
dan berikan border merah pada div induk.
Tiba-tiba, hanya teks yang menempel pada div induk yang akan menjorok ke kanan, sedangkan teks yang menempel pada gambar - tidak akan bergeser:
<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 demikian, mari tambahkan border hijau pada paragraf:
<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 paragraf bergeser
dari tepi kiri, tetapi bukan dari gambar, melainkan dari div induk.
Untuk melihat lebih detail, mari kita tambahkan
juga semi-transparansi pada gambar menggunakan properti
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 jelas terlihat bahwa ada reaksi terhadap margin-left,
hanya saja paragraf sebenarnya ditempatkan
di bawah gambar. Mari kita hapus marginnya,
tetapi biarkan semi-transparansi pada 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 tampilan paragraf kita - teksnya digeser oleh gambar, tetapi secara fisik paragraf terletak di bawah gambar, ini terlihat dari border yang dimulai dari tepi kiri div induk.
Mari kita kembalikan margin dan masukkan gambar
ke dalam paragraf 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 dengan paragraf!
