Beranda
CSS

Margin dan Padding pada CSS

Margin dan padding sangat penting untuk mengatur tata letak elemen di halaman web. Margin digunakan untuk mengatur jarak antar elemen dari luar
Kode Violet
Margin dan Padding pada CSS

Halo semua! Buat kalian yang sedang belajar CSS, pasti pernah dengar istilah margin dan padding, kan? Nah, pada kesempatan ini kodeviolet.com akan membahas tentang Margin dan Padding pada CSS secara lengkap dan mudah dimengerti.

Apa Itu Margin dan Padding?

Margin dan padding adalah dua properti penting dalam CSS yang digunakan untuk mengatur ruang di sekitar elemen HTML. Meski terlihat mirip, keduanya punya fungsi yang berbeda:

Properti Fungsi Letak
Margin Memberikan ruang di luar elemen Di luar border elemen
Padding Memberikan ruang di dalam elemen, antara konten dan border Di dalam border elemen

Penjelasan Margin

Margin digunakan untuk mengatur jarak antara elemen dengan elemen lain di sekitarnya. Kalian bisa mengatur margin di keempat sisi elemen: atas (top), kanan (right), bawah (bottom), dan kiri (left).

Contoh penggunaan:

.box {
  margin: 20px; /* Semua sisi */
  margin: 10px 15px; /* Atas-bawah 10px, kanan-kiri 15px */
  margin: 10px 5px 15px 0; /* Atas, kanan, bawah, kiri */
}

Penjelasan Padding

Padding mengatur ruang antara konten dan border dalam suatu elemen. Seperti margin, padding juga bisa diatur untuk setiap sisi.

Contoh penggunaan:

.container {
  padding: 20px; /* Semua sisi */
  padding: 10px 15px; /* Atas-bawah 10px, kanan-kiri 15px */
  padding: 10px 5px 15px 0; /* Atas, kanan, bawah, kiri */
}

Perbedaan Visual antara Margin dan Padding

Untuk lebih memahaminya, berikut ini contoh dalam bentuk kode HTML dan CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: lightblue;
      margin: 20px;
      padding: 10px;
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">Ini adalah contoh box dengan margin dan padding</div>
</body>
</html>

Dalam contoh di atas:

  • Margin akan memberikan ruang di luar garis biru (border).
  • Padding akan memberikan ruang di dalam border sebelum teks dimulai.

Kesimpulan

Margin dan padding sangat penting untuk mengatur tata letak elemen di halaman web. Margin digunakan untuk mengatur jarak antar elemen dari luar, sedangkan padding mengatur jarak dari dalam antara konten dan border. Dengan memahami keduanya, kalian bisa membuat desain web yang lebih rapi dan profesional.

Itulah tadi artikel dari kodeviolet.com, semoga membantu kalian dalam memahami margin dan padding di CSS. Kalau ada yang masih bingung, jangan ragu untuk bertanya, ya!

Posting Komentar