Tutorial ini akan membahas dua hal: margin luar dan padding luar.
Mari kita mulai dengan margin luar. Untuk elemen p yang didefinisikan langsung di dalam elemen body, pengaturan jarak kiri dan kanan dari tepi jendela berarti jarak ke batas luar elemen body. Jika ada beberapa paragraf berurutan, pengaturan padding atas dan bawah akan menentukan jarak antara setiap paragraf.
Saat mendefinisikan margin luar dan padding luar, nilai negatif juga memungkinkan, yang dapat menghasilkan tumpang tindih.
Menetapkan Margin Luar
Margin dan padding adalah ruang kosong yang dipaksakan antara elemen saat ini dengan elemen induk atau tetangganya. Beberapa properti CSS yang berguna di elemen HTML yang membuat paragraf sendiri atau membentuk blok adalah sebagai berikut.
Pada margin merupakan bentuk singkat dari empat properti margin-top, margin-right, margin-bottom, dan margin-left. Berikut nilai-nilai yang mungkin:
• auto – margin luar dihitung secara otomatis.
• Persentase – merujuk pada elemen untuk margin yang ditentukan.
• Panjang – nilai negatif juga diperbolehkan. Sehingga elemen bisa tumpang tindih.
Hingga empat nilai diperbolehkan:
• satu nilai – margin luar atas, bawah, kiri, dan kanan
• dua nilai – nilai pertama untuk margin luar atas dan bawah, nilai kedua untuk margin luar kanan dan kiri
• tiga nilai – nilai pertama untuk margin luar atas, nilai kedua untuk margin luar kiri dan kanan, nilai ketiga untuk margin luar bawah
• empat nilai – nilai pertama untuk margin luar atas, nilai kedua untuk kanan, nilai ketiga untuk bawah, dan nilai keempat untuk kiri.
Contoh berikut menunjukkan penggunaan properti margin umum:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Bangun Rig Kamera</p>
<p class="ex">Dalam video pelatihan ini, Anda akan belajar cara membuat Rig Kamera dan menggerakkannya dengan aman di ruang 3D. Sebuah file proyek disertakan.</p>
</body>
</html>
Dalam contoh ini, dua paragraf teks telah ditentukan.
Paragraf kedua juga diberikan margin.
margin: 30px 50px 30px 50px;
Pernyataan ini berarti hal berikut:
• Jarak 30 piksel ke atas
• Jarak 50 piksel ke kanan
• Jarak 30 piksel ke bawah
• Jarak 50 piksel ke kiri
Menetapkan Nilai Tunggal untuk Margin
Sebelumnya, pernyataan margin umum diperkenalkan. Namun, Anda juga dapat memberikan pernyataan individual. Melalui properti berikut, jarak atas, kiri, bawah, atau kanan dari elemen dapat ditentukan.
• margin-top – margin luar atas
• margin-right – margin luar kanan
• margin-bottom – margin luar bawah
• margin-left – margin luar kiri
Pada keempat properti tersebut, nilai-nilai berikut dapat digunakan:
• auto – margin luar dihitung secara otomatis.
• Persentase – merujuk pada elemen untuk margin- [atas, kanan, bawah, kiri].
• Panjang – nilai negatif juga diperbolehkan. Sehingga elemen bisa tumpang tindih.
Berikut contoh bagaimana penggunaan pernyataan tunggal dapat dimanfaatkan secara efektif.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Bangun Rig Kamera</p>
<p class="ex">Dalam video pelatihan ini, Anda akan belajar cara membuat Rig Kamera dan menggerakkannya dengan aman di ruang 3D. Sebuah file proyek disertakan.</p>
</body>
</html>
Di browser, hasilnya akan terlihat seperti ini:
Menetapkan Padding Dalam
Pada padding dalam adalah ruang kosong yang dipaksakan antara konten elemen dan batas elemen itu sendiri. Beberapa properti CSS yang berguna di elemen HTML yang membuat paragraf sendiri atau membentuk blok, meliputi.
Pada padding merupakan bentuk singkat dari empat properti padding-top, padding-right, padding-bottom, dan padding-left. Anda dapat menentukan lebar antara bingkai dan konten elemen, yaitu padding.
• Persentase – merujuk pada elemen induk.
• Panjang
Anda dapat memberikan hingga empat nilai masing-masing:
• satu nilai – padding atas, bawah, kiri, dan kanan
• dua nilai – nilai pertama untuk padding atas dan bawah, nilai kedua untuk padding kanan dan kiri
• tiga nilai – nilai pertama untuk padding atas, nilai kedua untuk padding kiri dan kanan, nilai ketiga untuk padding bawah
• empat nilai – nilai pertama untuk padding atas, nilai kedua untuk kanan, nilai ketiga untuk bawah, dan nilai keempat untuk kiri.
Contoh berikut menunjukkan bagaimana single statement dapat digunakan.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Bangun Rig Kamera</p>
<p class="ex">Dalam pelatihan video ini, Anda akan mempelajari cara membuat rig kamera dan bagaimana memindahkannya dengan aman melalui ruang 3D. File proyek disertakan.</p>
</body>
</html>Dan ini juga hasilnya di browser:
Dengan empat properti padding, jarak dalam dapat ditentukan. Berikut ini empat properti CSS yang tersedia untuk itu:
• padding-top – Jarak antara tepi atas konten dan bagian atas
• padding-bottom – Jarak antara tepi bawah konten dan bagian bawah
• padding-left – Jarak antara tepi kiri konten dan bagian kiri
• padding-right – Jarak antara tepi kanan konten dan bagian kanan.
Pada keempat properti tersebut, nilai-nilai berikut dapat digunakan:
• Persentase – mengacu pada elemen induk
• Ukuran panjang
