Belajar CSS (17. Inline-blok)

Inline-blok Pada CSS

Inline-blok adalah cara untuk membuat suatu kumpulan element yang sama menjadi blok baris yang membuat tampilan lebih mudah. Inline-blok merupakan value dari properti display dan penggunaan inline-blok merupakan cara baru untuk mengganti cara lama yaitu float + clear.
contoh versi lama

<!DOCTYPE html>
<html>
<head>
	<title>inline blok</title>
	<style>
		.floating-box{
			float: left;
			width: 150px;
			height: 75px;
			margin: 10px;
			border: 3px solid yellow;
		}
		.after-box{
    		clear: left;
    		border: 3px solid red;
		}
	</style>
</head>
<body>
	<h2>cara lama menggunakan float</h1>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>

	<div class="after-box">box lainya setelah floating box</div>
</body>
</html>

hasil

dan ini adalah menggunakan inline-blok

<!DOCTYPE html>
<html>
<head>
	<title>inline blok</title>
	<style>
		.floating-box{
			display: inline-block;
			width: 150px;
			height: 75px;
			margin: 10px;
			border: 3px solid yellow;
		}
		.after-box{
    		border: 3px solid red;
		}
	</style>
</head>
<body>
	<h2>cara lama menggunakan float</h1>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>
	<div class="floating-box">Floating box</div>

	<div class="after-box">box lainya setelah floating box</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.

Written by @akhi_syabab