MENGENAL MARGIN DAN PADDING PADA CSS
Margin dan Padding adalah kode syntax yang paling sering digunakan untuk membuat sebuah website karena fungsi dari margin dan padding adalah mengatur sisi dalam sebuah element dan mengatur sisi luar sebuah element . Pada tutorial kali ini akan dijelaskan apa itu Margin ? apa itu Padding ? dan bagaimana cara penggunaanya
MENGENAL MARGIN PADA CSS
Margin adalah sisi luar dari sebuah elemen. Misalnya sobat ingin mengatur jarak luar antar element sobat dapat menggunakan syntax margin ini. Kita dapat mengatur jarak sebuah sisi yang kita kehendaki, berikut penjelasanya
- margin-top : Mengatur jarak bagian luar pada sisi sebelah atas elemen
- margin-bottom : Mengatur jarak luar dalam pada sisi sebelah bawah elemen
- margin-left : Mengatur jarak bagian luar pada sisi sebelah kiri elemen
- margin-right : Mengatur jarak bagian luar pada sisi sebelah kanan elemen
index.html
<!DOCTYPE html>
<html>
<head>
<title>Margin CSS - Script Kiddies</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">
<h1>Kotak Bagian 1</h1>
</div>
<div class="kotak-dua">
<h1>Kotak Bagian 2</h1>
</div>
</body>
</html>
style.css
.kotak{
background: navy;
color: white;
margin: 25px;
width: 400px;
height: 180px;
}
.kotak-dua{
background: crimson;
color: white;
width: 320px;
height: 120px;
margin-left: 60px;
} |
| Hasilnya seperti berikut |
Perhatikan contoh diatas. Pada kotak-dua saya menggunakan margin-left atau margin kiri sebesar 60px atau 60 pixel, dan pada kotak pertama saya berikan margin sebesar 25px yaitu jarak luar segala element sebesar 25px.
MENGENAL PADDING PADA CSS
Padding adalah jarak sisi dalam sebuah element. Kita dapat mengatur jarak pada sisi dalam sebuah element dengan padding. Sama seperti yang memiliki sisi top,right,left,right . Berikut fungsi Syntax CSS yang berhubungan dengan padding
- padding-top : Mengatur jarak bagian dalam pada sisi sebelah atas elemen
- padding-bottom : Mengatur jarak bagian dalam pada sisi sebelah bawah elemen
- padding-left : Mengatur jarak bagian dalam pada sisi sebelah kiri elemen
- padding-right : Mengatur jarak bagian dalam pada sisi sebelah kanan elemen
index.html
<!DOCTYPE html>
<html>
<head>
<title>Padding CSS - Script Kiddies</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">
<h1>Kotak Bagian 1</h1>
</div>
<div class="kotak-dua">
<h1>Kotak Bagian 2</h1>
</div>
</body>
</html>
style.css
.kotak{
background: navy;
color: white;
padding: 25px;
width: 300px;
height: 180px;
}
.kotak-dua{
background: crimson;
color: white;
width: 420px;
height: 120px;
padding-left: 80px;
}
 |
| Hasilnya seperti berikut |
KESIMPULAN
Dapat kita simpulkan bahwa Padding berfungsi untuk mengatur jarak luar elemen dan padding mengatur jarak dalam elemen. Dua syntax CSS tersebut sangat penting kita pahami agar website yang kita buat nanti dapat terlihat menarik dan terstruktur alias tidak acak-acakan. Jika masih belum paham lihatlah gambar berikut
Cukup sekian tutorial Belajar CSS Part 4 ini jika ada pertanyaan silahkan berikan komentar pada kolom dibawah, Sekian Terima Kasih
Referensi : Malas Ngoding
TUTORIAL CSS LAINYA
- Belajar CSS Part 1 : Pengertian dan Mengenal CSS
- Belajar CSS Part 2 : Cara Penulisan CSS
- Belajar CSS Part 3 : Mengubah Background Dengan CSS
- Belajar CSS Part 4 : Margin dan Padding CSS
- Belajar CSS Part 5 : Mengatur Font Dengan CSS
- Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
- Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
- Belajar CSS Part 8 : Mengenal Position CSS
- Belajar CSS Part 9 : Mengatur Border Dengan CSS
- Belajar CSS Part 10 : Mengatur List Dengan CSS
- Belajar CSS Part 11 : Mengatur Float Dengan CSS
EmoticonEmoticon