Kita buka kembali kode dari pelajaran sebelumnya. Nah, disini ada tag H1 dengan konten Belajar CSS Layout. Kita coba klik kanan dan pilih Inspect.

Kalau kita arahkan mouse kita ke atas tag H1, maka Chrome akan memberikan warna pada konten Belajas CSS Layout tersebut. Kita bisa melihat bahwa konten diberi warna biru, sedangkan bagian atas dan bawahnya ada kotak berwarna orange. Untuk lebih jelas, kita bisa pilih tab Computed. Lalu kita bisa melihat CSS Box Model. Dan kalau kita arahkan kursor mouse kita ke warna Orange, maka Chrome akan memperlihatkan kembali kotak orange dibagian atas dan bawah judul. Kotak Orange ini kita sebut dengan nama margin. Fungsinya adalah untuk memberikan jarak antar tag.

Enaknya disini, kita bisa mencoba untuk mengubah margin langsung di Chrome Developer Tools. Caranya tinggal double klik ke nilai pada kotak margin tersebut, misalkan kita hendak ubah margin atas menjadi 10 pixel. Kita tinggal double klik dan mengganti angkanya menjadi 10, lalu tekan Enter. Dan sekarang jarak kotak kosong yang berada diatas judul menjadi lebih kecil.

Kita lihat pada kode HTML tag H1, Chrome secara otomatis telah menambahkan kode CSS secara inline, yaitu margin-top: 10px;. Ini adalah kode CSS yang bisa kita tambahkan ke source code kita untuk mendapatkan efek permanen dari perubahan ini.

Margin berada di keempat sisi dari kotak tag. Yang kita ubah barusan adalah sisi atas. Kita juga bisa mengubah sisi-sisi lainnya. Sebagai contoh, saya ingin mengubah margin bawah menjadi 50 pixel. Saya tinggal double klik ke kotak margin bagian bawah. Dan saya ganti nilainya menjadi 50. Perhatikan bahwa setelah saya menekan tombol Enter, maka jarak antara tag H1 dan paragraf pertama menjadi lebih jauh. Dan Chrome pun menambahkan kode CSS Inline margin-bottom: 50px.

Selanjutnya saya akan menambahkan margin di sebelah kiri. Kebetulan pada saat ini belum ada margin sama sekali pada bagian kiri judul. Saya double klik ke bagian marginnya, dan saya tambahkan nilai 100. Lalu setelah saya tekan tombol Enter, maka Chrome akan menambahkan margin di sebelah kiri konten, sehingga kontennya menjadi bergeser ke kanan. Perhatikan ya, sekarang pada sebelah kiri judul sudah ada kotak orange margin dengan lebar 100 pixel, dan konten mulai ditulis setelah margin.

Jadi disini jangan salah pengertian ya, jangan terbalik. Yang benarnya adalah margin-left berarti kita menambahkan margin di sebelah kiri konten, sehingga konten akan bergeser ke sebelah kanan. Kalau kita salah pengertian terhadap margin, pada saat kita ingin menggeser konten ke sebelah kiri, kita menambahkan kode CSS margin-left, terus kita bingung sendiri loh kok kontennya malah berpindah ke sebelah kanan. Jadi disini kita mesti mengerti dengan jelas dulu apakah itu margin. Margin adalah kotak kosong yang memberikan jarak antar tag.

Sisi terakhir yang bisa kita atur pada margin adalah sisi kanan. Misalkan saya ubah margin kanan menjadi 200 pixel. Saya tekan Enter. Tidak ada perubahan ya. Karena bagian kanan dari judul memang kosong. Namun apabila saya mengarahkan kursor ke tag H1, kita bisa melihat bahwa sekarang di sebelah kanan judul sudah ada kotak orange dengan lebar 200 pixel.

Agar margin kanan menjadi lebih kelihatan, kita bisa menambahkan warna latar belakang pada judul. Misalkan saya tambahkan pada kode HTML-nya, background-color: magenta. Sekarang kita sudah bisa melihat efek dari margin-right. Kalau saya ubah menjadi 0, maka warna magenta akan penuh hingga paling kanan browser. Sedangkan kalau saya beri nilai 200, maka akan ada jarak kosong yang cukup besar di sebelah kanan judul.

Semua perubahan yang kita lakukan pada Chrome Developer Tools hanya bersifat sementara. Apabila kita ingin agar perubahan ini tersimpan, maka kita harus memindahkan kode CSS Inline ini ke kode CSS kita. Disini kita bisa melihat bahwa kita bisa menggunakan properti margin-top untuk menambahkan margin pada bagian atas tag, margin-right untuk bagian kanan, margin-bottom untuk bagian bawah, dan margin-left untuk bagian kiri.

Kalau saya menekan tombol Refresh pada Chrome, maka kode CSS Inline-nya akan hilang dan tampilan situs kita kembali seperti semula.

Sekarang kita buka lagi kode CSS kita. Apabila saya ingin menambahkan jarak antara judul utama dengan paragraf pertama, maka saya bisa menambahkan selector h1, dengan properti margin-bottom: 50px. Kita simpan dan refresh browser. Sekarang antara judul utama dan paragraf pertama sudah ada jarak sejauh 50 pixel.

Ada beberapa behaviour dari properti margin yang perlu kita perhatikan disini. Yang pertama adalah Margin Overlapping. Kita klik kanan pada judul utama dan pilih Inspect. Perhatikan kalau saya mengarahkan kursor mouse saya ke tag h1, maka pada bagian bawah kotaknya terdapat margin sebesar 50 pixel. Ini adalah margin yang kita atur barusan. Sekarang perhatikan kalau saya mengarahkan kursor mouse saya ke atas paragraf pertama, pada bagian atas paragraf pertama juga memiliki margin. Jadi pada ruang kosong diantara judul utama dan paragraf pertama ini, sebenarnya terdapat 2 buah margin ya. Yang pertama adalah margin-bottom milik judul utama, dan yang kedua adalah margin-top milik paragraf pertama. Hal ini kita sebut dengan nama Margin Overlapping.

Bagaimana sifat dari margin overlapping? Untuk mencobanya, kita bisa menambahkan properti margin-top pada paragraf pertama. Misalkan kita coba dahulu nilai 40px. Kita simpan dan refresh browser. Ternyata tidak ada perubahan ya.

Perhatikan pada Chrome Developer Tools bahwa margin-top pada paragraf pertama semakin besar, namun berhubung margin-bottom pada judul utama lebih besar, maka browser memberikan jarak sebesar 50 pixel. Hal ini akan berbeda apabila kita menambahkan nilai pada margin-top paragraf utama, misalkan menjadi 80 pixel. Sekarang jarak antara judul utama dengan paragraf pertama menjadi lebih besar ya. Karena nilai margin-top pada paragraf pertama sudah lebih besar daripada margin-bottom pada judul utama.

Jadi apabila ada margin yang overlapping, maka browser akan menggunakan margin yang nilainya lebih besar. Namun hal ini hanya terjadi untuk margin vertikal saja ya. Untuk margin horizontal, behaviournya berbeda. Nanti akan kita bahas lagi.

Behaviour kedua dari margin yang perlu kita bahas adalah margin dapat diisikan dengan nilai negatif. Sebagai contoh, saya ganti dahulu margin-top pada paragraf pertama menjadi 0. Khusus untuk nilai nol, kita tidak perlu memberikan satuan pada nilainya. Nah, sekarang jarak antara judul utama dengan paragraf pertama adalah 50 pixel, seperti yang kita atur pada margin-bottom elemen h1.

Perhatikan kalau saya mengisikan nilai margin-top pada paragraf utama dengan nilai -40px. Kita simpan dan refresh browser. Sekarang paragraf pertama akan naik ke atas sejauh 40 pixel.

Behavior ketiga dari margin yang kita bahas disini adalah margin dapat kita isikan dengan nilai auto. Sebagai contoh, pada paragraf pertama saya ganti properti marginnya menjadi margin-left dengan nilai auto. Maka browser akan secara otomatis mengisikan margin di seluruh kiri paragraf pertama, sehingga kotak paragraf pertama menjadi rata kanan. Perhatikan bahwa pada saat saya membesarkan atau mengecilkan ukuran browser, kotak paragraf pertama tetap berada di kanan. Perhatikan juga bahwa yang rata kanan adalah kotaknya, sedangkan teks di dalam kotak tetap rata kiri.

Kita juga bisa menambahkan margin-right dengan nilai auto. Jadi apabila kita meminta browser untuk memberikan nilai auto pada margin kiri dan margin kanan, maka browser akan menaruh kotak paragraf pertama di bagian tengah browser. Perhatikan pada saat saya membesarkan atau mengecilkan ukuran browser, kotak paragraf pertama tetap berada di tengah browser. Jadi ini adalah salah satu trik yang bisa kita gunakan, apabila kita ingin membuat kotak yang berada di tengah.

Dan yang terakhir kita bahas disini adalah properti margin. Jadi keempat properti yang telah kita pelajari dalam video ini, margin-top, margin-bottom, margin-left dan margin-right, bisa kita singkat penulisannya menjadi satu properti saja, yaitu margin. Sebagai referensi, kita bisa search google dengan kata kunci css margin mdn. Lalu kita buka referensi dari situs MDN.

Nah, disini diberikan keterangan, bahwa kita bisa memberikan satu hingga empat nilai untuk properti margin. Apabila kita menuliskan satu nilai saja, maka nilai tersebut akan diaplikasikan ke empat sisi kotak. Sebagai contoh, saya hapus dahulu properti margin pada judul utama dan paragraf pertama. Lalu saya tambahkan margin di paragraf kedua. Misalkan saya isikan dengan nilai 50px. Maka browser akan memberikan jarak 50 pixel di keempat sisi paragraf kedua.

Kalau kita memberikan dua nilai pada margin, maka nilai pertama akan diaplikasikan pada sisi atas dan bawah, sedangkan nilai kedua akan diaplikasikan ke sisi kiri dan kanan. Sebagai contoh saya tambahkan nilai kedua dengan nilai auto. Maka sekarang kotak paragraf kedua menjadi rata tengah, karena margin kiri dan margin kanannya bernilai auto, sedangkan margin atas dan bawahnya bernilai 50px.

Sedangkan kalau kita isikan dengan tiga nilai, maka nilai pertama akan diaplikasikan ke sisi atas, nilai kedua akan diaplikasikan untuk sisi kiri dan kanan, sedangkan nilai ketiga adalah untuk bagian bawah. Jadi disini kita bisa memberikan nilai yang berbeda antar margin atas dan margin bawah. Sebagai contoh saya ganti nilai margin menjadi 10px auto 50px. Sekarang kotak dari paragraf kedua menjadi dekat dengan paragraf pertama, namun berjarak jauh dengan judul kecil pertama.

Dan yang terakhir, apabila kita memberikan 4 nilai pada margin, maka akan diaplikasikan ke sisi atas, kanan, bawah, kiri. Jadi untuk mengingatnya, nilainya akan dimulai dari atas, dan kemudian bergerak sesuai arah jarum jam ke arah kanan, bawah, dan terakhirnya kiri. Sebagai contoh saya ganti nilai margin menjadi 10px, 20px, 30px, 200px;. Maka browser akan memberikan jarak 10 pixel untuk sisi atas, 20 pixel untuk sisi kanan, 30 pixel untuk sisi bawah dan 200 pixel untuk sisi kiri.

Nah, kalau saya ganti properti width paragraf pertama menjadi 200 pixel, maka jadinya paragraf kedua akan berada di sebelah kanan paragraf pertama. Namun kedua paragraf masih berada di baris yang berbeda ya. Apabila saya ingin membuat agar paragraf kedua berada tepat di samping kanan paragraf pertama, masih ada satu properti lagi yang harus kita pelajari pada video berikutnya.

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.