Belajar CSS (13. Display)

Posted on

Display Dalam CSS

Properti display sangat penting karena display merupakan property CSS yang mengontrol layout.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.
ex.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<p>Display normal karena belum kita atur css nya</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>

hasil

kemudian kita atur menjadi deretan menu secara horizontal

<!DOCTYPE html>
<html>
<head>
	<style>
		li {
			display: inline;		
		}
	</style>
</head>
<body>
	<p>Display kita atur menjadi 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>

hasil

tag <li> secara default akan membuat baris baru, kode diatas merupakan contoh mengubah tampilan tag <li> yang secara default merupakan elemen block kita ubah menjadi inline. Begitupun sebaliknya, kita dapat mengubah element yang secara default inline menjadi block.

Contoh elemen blok:
<div>
<h1-h6>
<p>
<form>
<header>
<footer>
<section>

Contoh elemen inline:
<span>
<a>
<img>

Semoga bermanfaat.

Written by @akhi_syabab