Setiap tag html mempunyai property display default yaitu block & inline.

1) display:inline;

Property display dengan value inline memiliki efek berikut ini :

1. Element html yang secara default tidak baris baru ketika dibuat (tampil secara horizontal)
2. Lebar dan tinggi elemen nya sebesar konten yang ada di dalamnya
3. Kita tidak bisa mengatur tinggi (height) dan lebar (width) dari elemen inline. Jika mau merubah tinggi & lebar property display nya harus diubah
4. Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertikal

contoh tag tag html dengan property default display:inline

b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea

Jika jumlah konten bertambah maka lebar mengikuti isi konten saja

<div class="navigasi">
			<h2>Daftar Link</h2>
			<a href="#">Ini adalah Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
			<a href="#">Link 4</a>
		</div>
		

Menghasilkan

2). display:inline-block;

Untuk merubah display yang awalnya inline agar bisa diberikan tinggi & lebar maka nilai display harus diubah menjadi inline-block.

display:inline-block;

Source code css lengkap

a{
	display:inline-block;
	height:200px;
	width:200px;
	background-color:green;
}

Menghasilkan

tag a secara default display : inline; dimana tidak bisa diatur tinggi & lebarnya. Karena nilai property display sudah diubah menjadi display : inline-block; maka tinggi & lebarnya bisa di atur.

display:inline-block, bisa didefinisikan sebagai berikut :

1. Tidak ada element html yang secara default memiliki property display:inline-block;
2. Kita harus merubah manual property tsb
3. Perilaku dasarnya sama dengan element inline yaitu setiap ada penambahan element html baru maka akan ditampilkan pada baris yang sama (horizontal)
4. Perbedaannya (dengan display:inline), element html yang memiliki property display:inline-block dapat kita atur tinggi (height) & lebar (width) nya

3). display:block;

Property display:block, bisa didefinisikan sebagai berikut :

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

contoh tag tag html dengan property default display:blok

h1-h6, p, ol, ul, li, form, hr, div ...

Contoh source code

h1, h2, p{
	background-color:lightgreen;
}

Menghasilkan

Contoh lain, class=”main” kita kasih width:600px; lalu element h2 di dalam main kita kasih background color.

.main{
	width:600px;
	background-color:yellow;
}

.main h2{
	background-color:blue;
}

Menghasilkan

4). display:none

Digunakan untuk menghilangkan elemen html

Contoh source code

img{
	display:none;
}

Menghasilkan

Mengubah display

Untuk kondisi tertentu kita perlu merubah dari display.

Contoh kita buat menu navigasi menggunakan tag <ul> (default display:block)

<div class="navigasi">
			<h2>Daftar Link</h2>
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
			</ul>
			
		</div>

Menghasilkan

Lalu kita ubah sejajar ke kanan (inline)

.navigasi li{
	display:inline;
}

Menghasilkan

Semoga membantu

• CSS
• Layouting