Kode Program:
Css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layouting</title>
<style>
/* WIDTH CSS */
.kotak{
/* width = lebar */
/* height = tinggi */
width: 150px;
height: 150px;
background-color: cyan;
}
/* END WIDTH CSS */
/* DISPLAY CSS */
li{
border: 2px solid black;
padding: 20px;
margin: 5px;
}
/* DISPLAY INLINE */
.d-inline > ul > li{
display: inline;
background-color: red;
}
/* DISPLAY BLOCK */
.d-block > ul > li{
display: block;
background-color: yellow;
}
/* DISPLAY INLINE-BLOCK */
.d-inline-block > ul > li{
display: inline-block;
background-color: green;
width: 100px;
height: 50px;
}
/* END DISPLAY CSS */
/* MARGIN */
.margin > .content{
width: 150px;
height: 150px;
border: 2px solid red;
margin: 10px auto;
}
.padding > .content{
width: 150px;
height: 150px;
border: 2px solid black;
padding: 30px;
box-sizing: border-box;
}
/* END MARGIN */
</style>
</head>
<body>
<!-- WIDTH HTML -->
<div class="w-h">
<h1>Width & Height</h1>
<div class="kotak"></div>
<hr>
</div>
<!-- END WIDTH HTML -->
<!-- DISPLAY HTML -->
<h1>Display</h1>
<div class="d-inline">
<h2>Display Inline</h2>
<ul>
<li>d-inline1</li>
<li>d-inline2</li>
<li>d-inline3</li>
</ul>
</div>
<hr>
<div class="d-block">
<h2>Display Block</h2>
<ul>
<li>d-block 1</li>
<li>d-block 2</li>
<li>d-block 3</li>
</ul>
</div>
<hr>
<div class="d-inline-block">
<h2>Display Inline Block</h2>
<ul>
<li>d-inline-block 1</li>
<li>d-inline-block 2</li>
<li>d-inline-block 3</li>
</ul>
</div>
<hr>
<!-- END DISPLAY HTML -->
<!-- margin & padding HTML -->
<div class="margin">
<h1>Margin</h1>
<div class="content">
margin
</div>
<div class="content">
margin
</div>
<hr>
</div>
<div class="padding">
<h1>Padding</h1>
<div class="content">
padding
</div>
<div class="content">
padding
</div>
<hr>
</div>
<!-- end margin & padding HTML -->
</body>
</html>
Geser ke samping untuk lihat kode lengkap
Perhatian: Kode ini hanya untuk dilihat, tidak dapat disalin.