Display dan Clear

Dua Jendela November 15, 2021

7. Property CSS

a) Box Model

merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur

desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :

1. Height dan Width

2. Margin dan Padding

3. Border dan Outline

4. Position

5. Overflow

6. Float dan Clear

7. Display dan Visibility

-----------------lanjutan

7. Display dan Clear

Property display = digunakan untuk menyembunyikan sebuah elemen, namun elemen ini akan benar-benar dihapus dari layout dan tentu akan mempengaruhi elemen lain. Untuk itu kita perlu mengguanakn alternatif lainnya yaitu property visibility:hidden, dimana elemen yang disembunyikan tidak akan terhapus dan tidak memperngaruhi elemen lain. Sedangkan untuk menampilkan kembali elemen yang tadi disembunyikan dapat menggunakan perintah visibility:visible.

Pada sebuah tag HTML terdiri dari :

Block elemen
Inline elemen

Ciri-ciri dari Block elemen yaitu :”Lebar area akan mempengaruhi lebar kontainer”.Contohnya tag <p>, <h1>,<div> <header>.

Ciri-ciri daru Inline element yaitu :”lebarnya mengikuti konten, tidak memenuhi container.” Contohnya tag <span>, <img>, <a>.

Sifat dari block dan inline dapat diatur ulang menggunakan property display. Nilai yang dapat diberikan adalah :

Inline, elemen tidak dapat diberi property width dan height serta lebarnya mengikuti konten.

Block, lebar elemen memenuhi container sebelum diberi property width dan height

Inline-Block, lebar konten mengikuti elemen seperti inline, tapi bisa diberi property widht dan height

None, elemen akan disembunyikan.

Perhatikan contoh script dibawah ini dengan nama file display visibility.html

<html>
<head>
<title>Belajar CSS Float</title>
<style type="text/css">
   div{
       width: 150px; height: 150px;
       background: blue;
   }
   .satu{display: block}
   .dua{display: none}
   .tiga{
       display: inline-block;
       visibility : hidden;
   }
   .empat{display: inline-block;}
   .lima{display: inline;}
</style>
</head>
<body>
   <div class="satu">Satu</div>
   <div class="dua">Dua</div>
   <div class="tiga">Tiga</div>
   <div class="empat">Empat</div>
   <div class="lima">Lima</div>
</body>
</html>