Oke, pada pelajaran ini kita mulai dari halaman HTML kosong ya. Pada video sebelumnya kita sudah mempelajari mengenai tag DIV dan SPAN beserta apa saja yang menjadi perbedaannya. Sekarang kita ulangi sekilas. Pertama kita tambahkan dahulu sebuah tag div dengan konten Ini adalah tag Div. Lalu kita copy dan paste, kita tambahkan kata kedua.

Kita ulangi proses ini untuk tag span. Kita simpan dan refresh browser.

Nah sekarang kita bisa melihat perbedaan dari div dan span. Tag div bersifat block. Artinya browser akan menuliskan tag div di satu baris khusus, dan memindahkan konten lain ke baris berikutnya. Sedangkan span bersifat inline, artinya tag span akan berada di baris yang sama dengan konten dari tag lainnya.

Untuk lebih jelasnya, saya tambahkan dahulu kode css. Kita buat selector div dan kita beri background-color: lightgreen. Lalu kita berikan border 1px solid green.

Sedangkan span kita beri background-color blue dengan border 1px solid blue. Sekarang kita bisa melihat bahwa div akan memakan tempat satu baris penuh, sedangkan span bisa sharing baris yang sama dengan konten lainnya.

Sifat block dan inline ini bisa kita atur dengan menggunakan properti Display. Artinya kita bisa mengubah div menjadi span, dengan cara menambahkan display : inline. Dan kita juga bisa mengubah span menjadi div, dengan cara menambahkan display: block. Kita hapus dahulu properti display untuk mengembalikan div dan span ke nilai defaultnya.

Selanjutnya kita kembali ke kode HTML. Kita tambahkan sebuah paragraf. Dan kita isikan dengan konten lorem ipsum. Lalu kita pindahkan span pertama ke dalam paragraf. Sedangkan span kedua kita hapus. Kita simpan dan refresh browser. Sekarang konten dari span kita berada di dalam paragraf, tanpa mengubah struktur dari paragraf tersebut.

Selanjutnya kita akan lihat kembali bagaimana pengaruh dari properti-properti yang telah kita pelajari dalam playlist ini terhadap span. Pertama kita sudah mempelajari mengenai properti width dan height untuk mengatur lebar dan tinggi dari kotak. Kita tambahkan nilai width:100px dan height: 50px pada div dan span.

Kita simpan dan refresh browser. Sekarang kita bisa melihat bahwa kotak pada div sudah berubah menjadi ukuran 100x50 pixel. Sedangkan kotak span tidak terpengaruh ya. Jadi properti width dan height akan diabaikan apabila nilai display adalah inline.

Selanjutnya kita coba lagi properti margin. Kita tambahkan properti margin dengan nilai 20px baik pada div maupun span. Kita simpan dan refresh browser. Kita bisa melihat pada span, bahwa margin hanya berpengaruh secara horizontal saja. Sedangkan untuk sisi vertikalnya tidak dipengaruhi oleh margin.

Lalu kita ganti properti margin menjadi padding, baik pada div maupun span. Kita simpan dan refresh browser.

Nah, efek dari padding ini sedikit aneh ya. Warna background dari span membesar baik secara vertikal maupun horizontal. Namun konten dari paragraf hanya bisa turut bergeser secara horizontal pada baris span saja. Jadi kalau kita lihat pada baris Ini adalah tag span, konten paragraf akan terdorong ke kiri dan kanan. Namun konten paragraf pada baris lainnya tidak terdorong, sehingga akan bertabrakan dengan warna background span.

Untuk lebih jelasnya, kita bisa mengubah nilai padding menjadi 8px. Dan kita bisa melihat bahwa browser tetap menuliskan konten paragraf seperti biasa pada baris diatas dan dibawah span. Perbedaannya adalah konten paragraf pada baris diatas span berada di belakang background, sehingga tulisannya tertutup oleh warna background. Sedangkan konten paragraf pada baris dibawah span berada di depan background.

Sekarang perhatikan apabila kita mengubah properti display pada span menjadi block. Maka nilai dari properti width, height, margin dan padding akan berfungsi normal. Namun konten dari paragraf akan terbelah dua, karena display block akan memaksakan agar konten span dituliskan dalam satu baris khusus.

Dalam perkembangannya, muncul kebutuhan agar konten dari span tetap berada dalam paragraf, namun properti width, height, margin dan padding tetap berfungsi normal. Jadi sifat ini adalah gabungan antara inline dan block. Untuk kebutuhan seperti ini, kita bisa menggunakan nilai inline-block. Perhatikan kalau kita ubah nilai dari properti display menjadi inline-block. Nah, sekarang konten span tetap berada di dalam paragraf, namun konten tetap memperhatikan properti width, height, margin dan padding.

Dengan menggunakan nilai inline-block, maka kita bisa membuat kedua tag div ini menjadi bersebelahan. Sebagai contoh, pada div kita tambahkan properti display dengan nilai inline-block. Kita simpan dan refresh browser. Sekarang kedua kotak sudah bersebelahan.

Namun kalau diperhatikan lagi, ternyata diantara kedua kotak div terdapat sedikit ruang ya. Ini adalah spasi. Hal ini terjadi karena pada kode HTML kita, diantara tag penutup div pertama dan tag pembuka div kedua, terdapat karakter enter dan tab. Apabila kita hapus seluruh karakter tersebut sehingga tag penutup div pertama menempel dengan tag pembuka div kedua, maka kita akan mendapatkan hasil dua buah kotak yang menempel juga.

Kita buka lagi kode dari pelajaran sebelumnya. Kita akan memindahkan kotak paragraf kedua menjadi berada di samping kanan kotak paragraf pertama. Kita buka kode CSS. Pertama kita hapus dahulu properti padding, lalu kita atur width kedua kotak menjadi 150px agar kedua kotak berukuran sama. Lalu pada paragraf pertama dan paragraf kedua kita tambahkan properti display: inline-block;.

Sekarang kedua kotak paragraf sudah berada di baris yang sama. Namun kotak paragraf pertama berada di bawah. Hal ini bisa kita atur lagi menggunakan properti vertical-align:top, sehingga bagian atas dari kedua kotak akan sejajar.

Selanjutnya kita akan melihat bagaimana efek dari margin overlap secara horizontal ya. Pertama kita tambahkan dahulu properti margin-right sebanyak 10px pada paragraf pertama. Kita simpan dan refresh browser. Kita bisa melihat bahwa paragraf kedua akan bergeser ke kanan.

Lalu kita tambahkan lagi margin-left sebanyak 10px pada paragraf kedua. Kita simpan dan refresh browser. Dan bisa kita lihat bahwa kotak paragraf kedua bergeser lagi ke kanan. Jadi pengaruh dari margin overlap akan berbeda diantara sisi vertikal dan horizontal ya. Untuk sisi vertikal, browser hanya menggunakan nilai margin yang paling besar saja sebagai margin vertikalnya. Sedangkan untuk sisi horizontal, browser akan menggunakan kedua nilai margin sebagai jarak antar tag.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.