Merapikan Halaman Web dengan Memberi Jarak
Jika teman-teman perhatikan pada aplikasi web yang sering teman-teman gunakan, terdapat jarak antar elemen yang membuat tampilan aplikasi tersebut menjadi lebih indah. Yap, jarak merupakan salah satu hal terpenting dalam desain sebuah aplikasi web. Bagaimana kita dapat memberikan jarak antar elemen (margin) dengan CSS?
<p style="margin: 20px;">Teks dengan margin 20px di semua sisi.</p>
<!-- Elemen lainnya -->
<p>Elemen lain</p>Pada contoh kode di atas, elemen p pada baris pertama akan memiliki jarak (margin) sebesar 20 piksel pada setiap sisinya (atas, kanan, bawah dan kiri) terhadap elemen lain.
Kita juga dapat melakukannya seperti ini :
<p style="margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px">Teks dengan margin 20px di semua sisi.</p>
<!-- Elemen lainnya -->
<p>Elemen lain</p>CSS Box Model: Dasar-dasar Mendesain Tampilan
Saat kita berbicara tentang CSS Box Model, kita sebenarnya sedang berbicara tentang cara browser merancang setiap elemen HTML sebagai sebuah "kotak" yang memiliki beberapa lapisan. Setiap kotak ini memiliki empat bagian utama :
widthdanheight: Properti ini mengontrol lebar dan tinggi kotak (content).padding: Properti ini mengatur seberapa besar padding di sekitar konten.border: Properti ini mengontrol tampilan batas (border) dari kotak.margin: Properti ini menentukan seberapa besar margin di luar kotak.
Keempat properti tersebut dapat teman-teman coba gunakan seperti contoh kode memberikan margin sebelumnya. Properti padding, border dan margin sama-sama memiliki nilaiarah (atas, kanan, bawah dan kiri) yang dapat ditentukan besarannya sesuai kebutuhan kita.
Salah satu analogi yang sering digunakan untuk memahami CSS Box Model adalah dengan menganggap setiap elemen HTML seperti sebuah bungkusan kado. Di dalam bungkusan kado (content), kita memiliki hadiah (konten) yang ingin kita hias. Kita bisa menambahkan pita (padding) di sekitar hadiah, garis dekoratif (border) untuk menonjolkannya, dan kita mungkin juga ingin meletakkannya di atas meja dengan jarak tertentu (margin) dari hadiah lainnya.
Teman-teman juga dapat membaca artikel berikut untuk lebih memahami konsep CSS Box Model :
Referensi
https://blog.codeanalogies.com/2017/03/27/the-css-box-model-explained-by-living-in-a-boring-suburban-neighborhood/ https://www.w3schools.com/css/css_boxmodel.asp
Last updated