Cara Atur Jarak Antar Elemen HTML

Daftar Kategori Jarak Elemen HTML

Daftar Kategori Jarak Antar Elemen HTML

Dalam pengembangan antarmuka web, pengaturan jarak antar elemen HTML memegang peranan penting untuk menciptakan tampilan yang rapi, terstruktur, dan mudah dibaca. Framework seperti Bootstrap atau Tailwind menyediakan class bawaan seperti mb-3, p-4, dan leading-relaxed yang dapat dimanfaatkan untuk mengatur margin, padding, serta line-height secara konsisten.

Penggunaan margin: 0 secara global sebaiknya dihindari, kecuali seluruh elemen dikendalikan secara presisi. Disarankan menggunakan satuan em atau rem agar jarak antar elemen tetap responsif terhadap perubahan ukuran font dasar. Selain itu, penerapan CSS Reset atau Normalize.css penting untuk menyamakan tampilan default antar browser dan menghindari inkonsistensi gaya bawaan.

Berikut adalah tabel yang memuat kategori umum jarak antar elemen HTML yang sering perlu diatur. Gunakan properti CSS yang tepat untuk menghasilkan tata letak yang lebih tertata dan nyaman bagi pengguna.

📌 Kategori 🔍 Keterangan 💡 Properti CSS Umum
Baris teks dalam paragraf atau list Supaya teks tidak saling menempel line-height
Antar paragraf (<p>) Supaya tiap paragraf ada spasi margin-bottom
Antar elemen list (<li>) Biar antar item tidak dempet margin-bottom, line-height
Antar heading (<h1>–<h6>) dan konten Agar tidak terlalu dekat dengan teks/paragraf margin-top, margin-bottom
Antar gambar (<img>) dan teks Gambar sering terlalu dekat dengan teks margin, padding, display: block
Antar elemen form Form sering terlalu rapat margin-bottom, padding
Antar section atau container Supaya antar blok tidak menumpuk margin-bottom, padding
Antar elemen inline (span, a, strong) Teks bisa terlalu padat kalau span/inline banyak margin-right, word-spacing, letter-spacing
Antar tabel dan elemen lain Supaya tabel tidak nempel ke konten margin, padding, border-spacing
Jarak antar elemen di dalam Flexbox/Grid Tata letak antar item gap, margin, justify-content, align-items
Antar ikon dan teks Ikon font terlalu rapat margin-right atau padding
Footer & Header spacing Biar tidak menempel ke konten utama margin-top, padding-bottom

✅ Contoh CSS Global Agar Layout Lebih Rapi


  body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;  /* Lebih besar = lebih renggang */
  padding: 20px;
  }

  p, ul, ol, li, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1em;
  }

  img {
    display: block;
    margin: 1em 0;
    max-width: 100%;
    height: auto;
  }

  input, textarea, button, select {
    margin-bottom: 1em;
    padding: 0.5em;
  }

  section, article, div {
    margin-bottom: 2em;
  }

  .container, section, article {
    padding: 20px;
    margin-bottom: 30px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
  }

  td, th {
    padding: 0.5em;
    border: 1px solid #ccc;
  }

  .flex-container {
    display: flex;
    gap: 1em;
  }   
  
20ab250701r01p01t01

Komentar

Postingan populer dari blog ini

Jenis Marketing

Daftar Famili Botani Tanaman Hias

Lebih 141 Bahasa Resmi Negara di Dunia