Kursus Membuat Web

iklan

Display dan Visibility CSS

Property display menentukan bagaimana elemen ditampilkan, dan property visibility menentukan apakah terlihat atau disembunyikan.

Box 1
Klematis
Box 2
Klematis
Box 3
Klematis

Menyembunyikan Elemen

Menyembunyikan elemen bisa dilakukan dengan mengatur property display dengan nilai "none" atau property visibility dengan nilai "hidden". Namun, perhatikan bahwa kedua metode ini menghasilkan hasil yang berbeda :

visibility:hidden menyembunyikan elemen, tetapi masih mengambil ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tetapi masih mempengaruhi layout:

Contoh
h1.hidden {
    visibility: hidden;
}
Lihat ...

display:none menyembunyikan elemen, dan itu tidak akan mengambil ruang apapun. Elemen akan disembunyikan:

Contoh
h1.hidden {
    display: none;
}
Lihat ...

Display - Block dan Inline Elemen CSS

Sebuah elemen block merupakan elemen yang mengambil lebar penuh yang tersedia dan memiliki satu baris sebelum dan sesudahnya.

Contoh block elemen:

  • <h1>
  • <p>
  • <li>
  • <div>

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

Contoh inline elemen:

  • <span>
  • <a>

Merubah bagaimana sebuah elemen di tampilkan

Mengubah elemen inline menjadi elemen block, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Contoh berikut ini menampilkan elemen <li> menjadi inline:

Contoh
li {
    display: inline;
}
Lihat ...

Contoh berikut ini menampilkan elemen <span> menjadi elemen block:

Contoh
span {
    display: block;
}
Lihat ...

Contoh - Contoh Lain

p {
    display: inline;
}

Bagaimana menampilkan elemen menjadi elemen inline.

Contoh ini menunjukkan bagaimana menampilkan elemen menjadi elemen inline.

table, th, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}

Bagaimana membuat elemen table collapse

Contoh ini menunjukkan bagaimana membuat elemen table collapse.

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015