Cara Atur Jarak Antar 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