pengertian display dan fungsinya

Display adalah salah satu property dalam CSS yang berguna untuk mengatur tampilnya suatu elemen. Sehingga akan terlihat lebih rapi dan bagus. Pada saat ini kita akn mempelajari tentang beberapa display yang sering digunakan: 1. inline, 2. inline-block, 3. block 4. none

  1. inline

sifat-sifat inline antara lain adalah sebagai berikut:

  1. Element HTML yang secara default tidak menambahkan baris baru ketika dibuat,
  2. Lebar tinggi elementnya sebesar konten yang ada didalamnya,
  3. kita tidak dapat mengatur tinggi dan lebar dari element inline

Berikut adalah macam-macam tag HTML yang termasuk kedalam display inline:

  1. <b>
  2. <strong>
  3. <i>
  4. <em>
  5. <a>
  6. <span>
  7. <sub>
  8. <button>
  9. <input>
  10. <label>
  11. <select>
  12. <textarea>

Cara penggunaannya ialah sebagai berikut:

Loh kok tidak diberi element displaynya. Tenang karena tag <a> sudah termasuk kedalam display: inline;.

2. inline-block

Tadi kita sudah mempelajari tentang display inline. Kita akan buat supaya background nya menjadi lebih besar. cara yang akan kita beri yaitu kita beri display: inline-block; . Mari kita coba!

Sebelum kita beri display: inline-block;

Setelah kita beri display: inline-block;

3. block

sifat-sifat yang ada pada display: block; berlawanan dengan display: inline;. Sifat-sifat yang ada pada display: block adalah sebagai berikut:

  1. Element HTML yang secara default menambahkan baris baru ketika dibuat,
  2. Jika tidak diatur lebarnya, maka lebar default dari element block akan memenuhi lebar dari browser/parent nya,
  3. Kita dapat mengatur tinggi dan lebar dari element block,
  4. Di dalam element block, kita dapat menyimpan tag dengan element inline, inline-block, atau bahkan element block lagi.

Sebelum kita beri lebar dan tingginya:

Setelah kita beri lebar dan tingginya:

4. none

Display ini akan menghilangkan semua element yanga ada padanya.

sekian terima kasih.

baca juga lainnya di web site Dhuo Creative.

baca juga tentang div dan span pada HTML.

Nindya

Kamu Mau, Kamu Pasti Bisa

http://web.dhuocreative.com
X