Tutorial Lengkap Memahami Css Display

21 views

Salam teman jagocoding,, Kembali aku ingin membagikan tutorial untuk kita semua.. Kalau dulu aku pernah share Tutorial Lengkap Memahami CSS Position, kali ini aku mau kembali share salah satu tutorial yang akan membantu kita memahami sintaks CSS Display.

Sintaks Display sendiri bekerjsama nilainya lebih banyak lagi dari position.. Ada inline, block, inline-block, none, table, table-cell, table-row,  flex, dan sebagainya. Saya sendiri juga nggak pake semuanya,, yang paling sering aku pakai itu cuma display inline, block, inline-block, none, sama flex.. Kaprikornus kali ini aku bagikan semua yang aku tahu ya.. Yuk disiapkan dulu sebuah file HTML untuk sarang percobaan kita.. 😀

 

DISPLAY : INLINE;

Kata kunci untuk display:inline ini adalah, mengalir ke samping. Semua layer yang diberikan display:inline ini akan terus mengalir ke samping. Perhatikan ini :

<span class="inline">Ini yaitu layer dengan display:inline. </span><span class="inline">Ini yaitu layer dengan display:inline. </span><span class="inline">Ini yaitu layer dengan display:inline. </span>
.inline{display:inline;}

Seperti yang kita lihat,, layer dengan display inline berturut-turut akan menciptakan layer tersebut mengalir ke samping. Akan sangat berbeda dengan display-display yang lainnya.

Keunikan display:inline lagi adalah, tidak bisa diberikan margin top dan bottom, tidak bisa diberikan width/height, dan padding overlapping. Untuk melihatnya, kita coba berikan teks sembarangan sebelum dan sehabis layer inline tadi, kemudian berikan background, margin dan padding sebesar 20px; di layer .inline.

Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, <span class="inline">Ini yaitu layer dengan display:inline. </span><span class="inline">Ini yaitu layer dengan display:inline. </span><span class="inline">Ini yaitu layer dengan display:inline. </span>Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, 
.inline{display:inline;background:#cf0;margin:20px;padding:20px;width:50px; /*percuma.. dihapus juga ga apa-apa*/height:500px; /*percuma.. dihapus juga ga apa-apa*/}

 

Hasilnya nanti akan menyerupai ini :

Kesimpulannya,, dengan sifat display:inline menyerupai ini, berarti display:inline tidak cocok digunakan sebagai container sebab tidak mengeksekusi margin dan padding dengan baik, dan tidak bisa diatur lebar dan tingginya,, melainkan hanya untuk menampung teks / gambar statis saja. 

 

DISPLAY : BLOCK;

Kata kunci untuk display:block; ini adalah kotak, mengalir ke bawah, KEBALIKANNYA DISPLAY:INLINE. Kalau display:inline tadi mengalir ke samping, display:block dalam jumlah banyak akan terus mengalir ke bawah. Kalau di display:inline width dan height tidak bisa digunakan, disini bisa digunakan, Untuk lebih jelasnya, kita lanjutkan HTML kita sekarang,,

Kita lanjutkan dengan tag <br> dulu agar rapi,, sehabis itu kita bikin 3 layer dengan class block. sama menyerupai layer inline tadi, kita berikan background, margin, dan padding.

<br><br><div class="block">Ini yaitu layer dengan display:block;</div><div class="block">Ini yaitu layer dengan display:block;</div><div class="block">Ini yaitu layer dengan display:block;</div>
.block{display:block;background:#0fc;margin:20px;padding:20px;}

Hasilnya sangat berbeda bukan dengan display:inline tadi?

Secara default, display block yang tidak diberikan atribut width akan mengambil lebar yang pribadi memenuhi layar. Dan kalau diberikan atribut width, layer tersebut tidak akan memenuhi layar ke samping, tapi mengosongkan ruang sisanya. Coba kita tambahkan width:300px; di layer .block..

.block{display:block;background:#0fc;margin:20px;padding:20px;width:300px;}

Nah, itulah salah satu sifat layer dengan display:block; Tidak menyerupai inline, display:block; umumnya digunakan sebagai container / layer yang menampung layer lain sebab kemampuan pengaturan lebar dan tinggi yang baik ini. 

 

DISPLAY : INLINE-BLOCK;

 Kata kunci untuk display:inline-block; yaitu kotak, mengalir ke samping. Dengan kata lain, display:inline-block ini yaitu campuran dari display:inline dan display:block; Maksudnya berkata kunci kotak,, display:inline-block ini bisa diatur margin, padding, width, dan heightnya dengan baik menyerupai display:block,, akan tetapi alurnya tetap ke samping menyerupai display:inline;

Untuk lebih memahaminya, kita copy paste saja baris HTML kita mulai dari teks sembarang hingga layer inline tadi, kita paste di baris paling bawah, dan ganti classnya jadi inlineBlock.

....<br><br>Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, <span class="inlineBlock">Ini yaitu layer dengan display:inline. </span><span class="inlineBlock">Ini yaitu layer dengan display:inline. </span><span class="inlineBlock">Ini yaitu layer dengan display:inline. </span>Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, Teks sembarangan saja,, 

CSSnya juga nggak beda jauh dengan punya .inline tadi,, tinggal kita ganti aja dari display:inline jadi inline-block;

.inlineBlock{display:inline-block;background:#cf0;margin:20px;padding:20px;}

Dan ini nih hasilnya

Author: 
    author
    No related post!