Pengertian CSS Display (Block, None, Inline )

Advertisement

Advertisement

CSS Display

Didalam CSS terdapat banyak beberapa kode, Tentunya anda tidak mungkin menghafal satu persatu. Untuk demikian supaya anda mudah mengerti, Lebih baik anda mencoba. Untuk itu untuk mencobanya gunakan xamp, Baca Juga : Cara Cepat Install Xampp & Setting Xampp Lengkap atau langsung test langsung dari file html .

Contoh :

Display:Inline

- Mendefinisikan elemen dalam baris yang sama dengan elemen lain .

Contoh kode :

li{ display:inline; } HTML : <ul> <li>CSS</li> <li>PHP</li> <li>MYSQL</li> </ul>

Hasil :

• CSS
• PHP
• MYSQL

Display:Block

- Seperti halnya membuat baris baru pada elemen .

Contoh kode : 

.bl{ display:block; HTML : <span class="bl">Example block</span> <span class="bl">Ended example</span> <span class="bl">Berbagi</span> }

Hasil :

Example block Ended example Berbagi

Display:None

- Tidak menampilkan elemen / html akan di anggap hilang .

Contoh kode :

h2.hide{ display:none; } HTML : <h2 class="hide"> Elemen hide</h2>

Hasil : Elemen akan hilang .


Tidak sama dengan visibility:hidden, 

- Tidak menampilkan html, tetapi dianggap masih ada .

Contoh kode :

h2.q{ visibility: hidden; } HTML : <h2> Awal baris</h2> <h2 class="q"> Visibility hidden</h2> <h2> Akhir baris></h2>

Hasil :

Awal baris

Visibility hidden

Akhir baris

- Copy dari h2 awal baris ke akhir, akan terlihat text visibility hidden nampak akan tidak terlihat tetapi masih akan dianggap ada ( seperti halnya background z-index tanpa text ) .

Advertisement

Advertisement