Setiap elemen pada halman web adalah kotak persegi panjang. Property tampilan menetukan bagaimana kotak persegi panjang itu berlaku. Elemen blok adalah elemen yang menggunakan lebar penuh yang tersedia, dengan jeda baris sebelum dan sesudahnya.

Aturan style dalam contoh berikut menampilkan elemen sebaris sebagai elemen level blok:

First paragraph
Second paragraph
Third paragraph
Fourth paragraph
Fifth paragraph

display-block.png

Elemen inline hanya membutuhkan lebar sebanyak yang diperlukan, dan tidak memaksa jeda baris.

Kode di atas akan menghasilkan hasil sebagai berikut:

display-inline.png

Menentukan properti tampilan elemen hanya mengubah cara elemen ditampilkan, bukan jenis elemennya. Jadi, elemen inline dengan display: block tidak boleh memiliki elemen blok lain di dalamanya.

display: none menyembunyikan elemen, sehingga tidak memakan tempat. Elemen tersebut akan disembunyikan, dan halaman akan ditampilkan seolah-olah elemen tersebut tidak ada.

<h1>This text will not display, as we set the value to none.</h1>
Headline of this paragraph is not displayed, as we set the value to none.

display-none.png

Ada banyak nilai tampilan lainnya, seperti list-item, table, table-cell, tabel-column, grid, dll. Mainkan saja dengan nilai untuk melihat perbedaannya.

CSS Positioning and Layout

The diplay Property - display: block

display: inline

display: none

Resdeby Almustofa

Comment

Related Posts

Categories