CSS Layouting : Display

     Setiap tag pada html berada didalam sebuah kotak. Property display pada CSS mengatur prilaku dari kotak tersebut. Setiap tag pada HTML memiliki nilai default untuk property display. Tetapi kita juga dapat mengubah prilaku dari tag tersebut dengan mengganti value-nya.

Display memiliki 4 value, yaitu :

• inline
• inline-block
• block
• none

inline 

• Elemen HTML yang secara default tidak menambahkan garis baru ketika dibuat
• Lebar dan tingginya sebesar konten yang ada didalamnya
• Kita tidak dapat mengatur tinggi dan lebar dari element inline
• margin dan padding hanya memengaruhi element secara horizontal tidak vertikal 

contoh tampilan inline

inline-block

• Tidak ada element yang secara default memiliki property display: inline block;
• Kita harus ubah secara manual property tersebut
• Prilaku dasarnya sama dengan element inline 
• Perbedaannya, element inline-block dapat kita atur lebar dan tingginya

contoh tampilan inline-block

block

• Element HTML secara default menambahkan garis baru ketika dibuat 
• Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari broser/parentnya
• Kita dapat mengatur lebar dan tinggi dari element block
• Didalam element block, kita dapat menyimpan tag dengan element inline, inline-block, atau element block lagi

contoh tampilan block

none

    Digunaan untuk menghilangkan sebuah element