Halo semuanya, pada pembahasan ini badoystudio akan mengulas penggunaan margin dan padding pada CSS untuk mendesain website. Ingin tahu selengkapnya seperti apa? Simak artikel ini sampai habis.
Daftar Isi
Properti yang Banyak digunakan di CSS
Dari sekian banyak properti pada CSS yang digunakan untuk mendesain website yang dibangun dengan HTML, properti margin dan padding adalah yang paling banyak diterapkan. Karena fungsi utama keduanya yaitu mengatur jarak luar dan dalam di antara elemen HTML.
Pengertian dan Fungsi Margin pada CSS
Margin yaitu area kosong yang berada disisi luar elemen HTML. Fungsi utama margin yaitu untuk mengatur jarak pada bagian sisi luar elemen HTML. Supaya lebih jelas silahkan perhatikan gambar berikut :
Cara Menggunakan Margin pada CSS dengan Mudah
Ada beberapa cara untuk menggunakan margin pada CSS, yaitu :
Margin – Properti Pendek/ Singkat
Margin sendiri memiliki 4 sisi, yaitu margin atas, kanan, bawah, dan kiri. Nah, untuk mempersingkat penulisan kode, kamu bisa menentukan semua properti margin hanya dengan menuliskan satu saja.
Contohnya :
jika kita ingin memberikan nilai properti :
- Margin atas : 25 px
- Margin kanan : 50 px
- Margin bawah : 75 px
- Margin kiri : 100 px
Cukup hanya menuliskan properti margin seperti ini pada CSS :
margin: 25px 50px 75px 100px;
Contoh lengkapnya seperti kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Menggunakan Margin dengan Properti Singkat</h2>
<div>Ini adalah contoh penggunaan dari margin dengan properti yang singkat</div>
<hr>
</body>
</html>
Hasilnya :
Kalau kita memberikan nilai yang sama pada setiap margin. Maka, cukup tuliskan properti seperti ini saja :
margin : 50px,
Itu artinya kita sudah memberikan nilai pada semua properti margin kanan, kiri, atas, bawah dengan nilai 50 px.
Begitu juga kalau kamu ingin menentukan 2 nilai margin yang sama. Atas-bawah : 25 px, dan kanan – kiri : 50 px, maka cukup tuliskan :
margin : 25px, 50px;
Margin – Auto Value
Kamu juga bisa mengatur properti margin ke auto, di mana nantinya margin akan membagi rata ruang yang tersisa ke margin kanan atau kiri.
Contohnya seperti berikut :
Jadi, sampai di sini kamu sudah tahu cara penggunaan margin pada CSS, yaitu :
- Menuliskan properti margin secara lengkap
- Menuliskan properti margin secara singkat
- Atau menggunakan auto value
Pengertian dan Fungsi Padding pada CSS
Padding merupakan area kosong yang ada pada sisi dalam sebuah elemen HTML. Fungsinya yaitu untuk memberikan jarak di antara elemen HTML yang ada di dalamnya. Supaya lebih paham, silahkan perhatikan gambar di bawah ini :
Cara Menggunakan Padding pada CSS
Mirip dengan penggunaan margin, menggunakan padding pada CSS bisa dilakukan dengan :
Menuliskan Properti Lengkap
Ada 4 sisi padding yaitu :
- Padding top / atas
- Padding bottom / bawah
- Padding right / kanan
- Padding left / kiri
Contoh penggunaan properti lengkap yaitu seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Menggunakan Properti Lengkap</h2>
<div>Ini adalah padding menggunakan properti lengkap</div>
</body>
</html>
Hasilnya adalah :
Menuliskan Properti Singkat
Kamu juga bisa mempersingkat penulisan nilai padding sama seperti penjelasan margin di atas. Contoh penulisan :
padding : 25 px, 30px, 40px, 50px;
artinya sama dengan :
- Padding top 25px
- Padding bottom 30px
- Padding right 40px
- Dan padding left 50px
Atau bisa juga dengan menuliskan satu nilai saja jika semua nilainya sama untuk semua sisi :
Padding : 50px;
Dan bisa juga menuliskan 2 nilai saja untuk kedua sisi yang sama, atas – bawah dan kanan – kiri :
Padding : 25px 50px;
Penutup
Itulah bahasan mengenai margin dan padding pada CSS. Semoga menambah insight dan bermanfaat untuk kamu. Dan jangan lupa share juga ke temanmu yang lainnya supaya lebih tersebar luas manfaatnya.
Sumber gambar utama : medium.com