Tutorial Belajar CSS Part 15 - Tampilan yang Dinamis dengan CSS: Mengenal Properti Display

• 10/16/2023
• Dimas Ahmad Rizal
• 138

 

Tutorial Belajar CSS Part 15: Tampilan yang Dinamis dengan CSS - Mengenal Properti Display

Properti display dalam CSS memungkinkan pengaturan tata letak elemen HTML, memungkinkan kontrol yang lebih besar terhadap tampilan dan penataan elemen di dalam halaman web. Dalam tutorial ini, kita akan menjelaskan berbagai nilai properti display dan bagaimana mereka memengaruhi tampilan elemen.

1. Block, Inline, dan Inline-Block

Block

.block-element {
  display: block;
}

Inline

.inline-element {
  display: inline;
}

Elemen inline hanya akan memenuhi ruang yang diperlukan oleh kontennya dan tidak memulai baris baru.

Inline-Block

.inline-block-element {
  display: inline-block;
}

Elemen inline-block menempati sebagian lebar yang tersedia dan tetap berada dalam satu baris.

2. None

None

.hidden-element {
  display: none;
}

Elemen dengan display: none; tidak akan ditampilkan dan tidak ada ruang yang diambil di halaman.

3. Table, Table-Row, dan Table-Cell

Table

.table-element {
  display: table;
}

Elemen akan ditampilkan sebagai tabel.

Table-Row

.table-row-element {
  display: table-row;
}

Elemen akan ditampilkan sebagai baris dalam tabel.

Table-Cell

.table-cell-element {
  display: table-cell;
}

Elemen akan ditampilkan sebagai sel dalam tabel.

4. Flex

.flex-container {
  display: flex;
}

Flex

Elemen akan ditampilkan sebagai container flexible untuk mengatur elemen-flex di dalamnya.

Keuntungan Menggunakan Properti Display dalam CSS

• Kontrol Lebih Besar: Memungkinkan pengaturan tata letak dan tampilan elemen yang lebih fleksibel.
• Responsivitas: Meningkatkan responsivitas desain terhadap berbagai ukuran layar.
• Penyusunan Tata Letak: Memungkinkan penyusunan tata letak yang lebih efisien.

Kesimpulan

Properti display dalam CSS adalah alat yang kuat untuk mengontrol tata letak elemen dalam halaman web. Dengan memahami perbedaan dan penggunaan nilai-nilai properti display, Anda dapat meningkatkan kontrol dan fleksibilitas desain tampilan halaman web Anda. Pengetahuan yang baik tentang penggunaan properti display akan memperbaiki struktur tata letak halaman web dan responsivitas desain secara keseluruhan.