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;
}
Komentar
Posting Komentar
Kami berhak untuk menghapus komentar yang tidak sesuai dengan kebijakan komentar kami