Margin dan Padding

Dua Jendela Friday, November 12, 2021

Sumber gambar : webhozz.com

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

Masing-masing keterangannya sebagai berikut :

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

2. Margin dan Padding

Property margin, mengatur jarak box dengan elemen di sekitar box atau kontainer (pembungkus box)
Property padding, mengatur jarak box dengna konten didalamnya.

Property margin mempunyai turunan seperti :

margin-top
margin-right
margin-bottom
margin-left

Property margin mempunyai turunan seperti :

padding-top
padding-right
padding-bottom
padding-left

Nilai dari kedua property ini berupa angka dengan satuan yang umum digunakan adalah px.

Nilai lain berupa :

inherit,
auto, jika diisi auto maka browser akan membuat nilai yang sama pada setiap sisi, sehingga box menjadi rata tengah.

Khusus property padding, property ini akan mempengaruhi lebar atau tinggi box keseluruhan.

Misal, ada box punya lebar 60px dan diberi padding 10px, maka lebar box menjadi 80px karena tambahan kanan 10px dan kiri 10px.

Perhatikan contoh script dibawah ini dengan nama file margin padding.html

<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.kotak{
   background:green;
   width:200px;
   height:100px;
   margin:20px 0 0 100px;
   padding:10px 15px;
}
</style>
</head>
<div class="kotak">IsI Kotak Kita berupa impian</div>
</html>