Badoy Studio

margin dan padding pada css

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.



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 :

Sumber : learnwebcode.com

 

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 :

Sumber : hubspot blog

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.