Belajar CSS Part 17 - Mengatur Tampilan Halaman (Display)

CSS Layout - Properti Display
Properti display adalah properti CSS yang paling penting untuk mengendalikan tata letak halaman web. Properti display menentukan apakah / bagaimana elemen akan ditampilkan.

Setiap elemen HTML memiliki nilai tampilan (display) default tergantung pada jenis elemen itu. Tampilan (display) nilai default untuk sebagian besar elemen adalah block atau inline.

Display Block
Elemen blok merupakan elemen yang bertujuan untuk membagi halaman HTML menjadi bagian yang terpisah, atau menjadi blok. Element block akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya. Artinya, display block ini bisa menggunakan properti width dan height.

Berikut merupakan elemen-elemen pada display block:

<div>
<h1> - <h6>
<p>
<li>
<form>
<header>
<footer>
<section> dll.

Selain elemen-elemen diatas, masih ada lagi elemen-elemen lain yang tidak disebutkan. Untuk melihat lebih lengkap, kunjungi Tutorial Elemen Inline dan Block pada Tutorial HTML sebelumnya.

Berikut adalah contoh penggunaan beberapa elemen yang ada pada display block.
Contoh

a {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Display links as block elements:</p>

<a href="https://king-octahasan.blogspot.com/search/label/Tutorial%20HTML5?&max-results=8" target="_blank">Belajar HTML</a>
<a href="https://king-octahasan.blogspot.com/search/label/Tutorial%20CSS3?&max-results=8" target="_blank">Belajar CSS</a>
<a href="#" target="_blank">Belajar JavaScript</a>

</body>
</html>

Hasilnya akan seperti ini:

Display Inline
Elemen inline akan menyatu dengan tag sebelum dan sesudahnya. Tag ini tidak akan memulai blok atau baris baru namun akan tetap berada di dalam blok tersebut. Tag inline juga tidak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. Artinya, display inline tidak bisa menggunakan property width dan height.

Berikut merupakan elemen-elemen pada display inline:

<span>
<a>
<img>
<b>
<i>
<em> dll.

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Tampilannya terlihat seperti sebuah menu horizontal:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Hasilnya akan seperti ini:

Catatan: Mengatur properti tampilan elemen hanya mengubah bagaimana elemen ditampilkan, tidak seperti apa elemen itu. Jadi, elemen inline dengan display: block; tidak diizinkan untuk memiliki elemen-elemen blok lain di dalamnya.

Display inline-block
Display inline-block merupakan gabungan dari display inline dan block. Sudah dijelaskan pada bagian diatas jika display inline tidak bisa menggunakan property width dan height, dan display block bisa menggunakan property width dan height. Display inline-block memiliki tampilan seperti inline namun kita bisa menggunakan property width dan height.

Contoh berikut menunjukkan cara kerja yang berbeda dari display: inline;, display: inline-block; dan display:block;.
Contoh

span.a {
    display: inline; /* the default for span */
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;    
    background-color: yellow; 
}

span.b {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;        
    background-color: yellow; 
}

span.c {
    display: block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;        
    background-color: yellow; 
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Properti display</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>
</html>

Hasilnya:

Display: none;
display: none; umumnya digunakan dengan JavaScript untuk meniadakan dan menampilkan elemen tanpa menghapusnya. Dengan kata lain, display:none; artinya meniadakan suatu elemen yang diinginkan tanpa mengambil ruang apapun pada browser.
Contoh

h1.tiadakan{
    display: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading yang terlihat (ditampilkan di browser)</h1>
<h1 class="tiadakan">Ini adalah heading yang ditiadakan</h1>
<p>Perhatikan bahwa elemen h1 dengan display: none; tidak mengambil ruang apa pun. </ p>

</body>
</html>

Hasilnya akan seperti ini:

Catatan: Perhatikan bahwa elemen h1 dengan tampilan: none; tidak mengambil ruang apa pun.

Catatan: Pada elemen <script> menggunakan display: none; sebagai default.

Visibility: hidden;
visibility: hidden; digunakan untuk menyembunyikan elemen dengan mengambil atau menyisakan ruang sesuai ukuran elemennya.
Contoh

h1.hidden {
    visibility: hidden;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading yang terlihat (ditampilkan di browser)</h1>
<h1 class="hidden">Ini adalah heading yang tersembunyi</h1>
<p>Perhatikan bahwa heading yang tersembunyi masih membutuhkan ruang di browser. </ p>

</body>
</html>

Hasilnya akan seperti ini: