Tutorial Belajar Padding di HTML
Sunday, May 14, 2017
Add Comment
Padding adalah property style yang dapat kita gunakan untuk memberi spasi antara konten di dalam elemen dengan border. Padding sangat bermanfaaat untuk membuat tampilan menjadi lebih nyaman dilihat.
Coba bandingkan teks ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
dengan ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Yang manakah yang lebih enak dilihat? Tentu yang kedua, karena kotak kedua memiliki jarak antara batas kotak dengan konten teksnya. Disitulah peran
padding.Padding di Sisi Tertentu
Ketika kita menulis:
padding: 15px;
maka spasi akan diterapkan di semua sisi elemen. Bila kita ingin mengatur padding hanya pada sisi tertentu saja, kita dapat menggunakan property
padding-left untuk padding kiri, padding-top untuk padding atas, padding-right untuk padding kanan dan padding-bottom untuk padding bawah.
padding-left: 15px;
padding-bottom: 15px;
Bila kode di atas kita terapkan pada paragraf di contoh sebelumnya, maka tampilannya akan seperti ini:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ada cara lain yang lebih ringkas untuk menentukan ukuran padding dari masing-masing sisi, yakni dengan menggunakan property
padding dan mengisinya dengan beberapa nilai:| nilai | Hasil |
|---|---|
padding:15px; |
|
padding:15px 8px; |
|
padding:15px 8px 4px; |
|
padding:15px 8px 4px 2px; |
|
PRAKTEK
- Pada editor terdapat paragraf dengan border. Jalankan kode dan lihat hasilnya.
- Tambahkan padding pada paragraf tersebut sebesar 10px agar nampak lebih bagus.
<p style="text-align:justify; border:1px solid blue; padding: 10px;">
Selamat belajar style dasar pada HTML di website CodePolitan. Ikuti juga tutorial lainnya.
</p> - Ganti supaya bordernya hanya tampil di bagian atas dan bawah saja, dan set paddingnya 10px untuk bagian atas dan bawah saja.
<p style="text-align:justify; border-top:1px solid blue; border-bottom:1px solid blue; padding: 10px 0;">Selamat belajar style dasar pada HTML di website CodePolitan. Ikuti juga tutorial lainnya.
</p>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p style="text-align:justify; border:1px solid blue;">
Selamat belajar style dasar pada HTML di website CodePolitan. Ikuti juga tutorial lainnya.
</p>
</body>
</html>
Hasilnya:
Selamat belajar style dasar pada HTML di website CodePolitan. Ikuti juga tutorial lainnya.
0 Response to "Tutorial Belajar Padding di HTML"
Post a Comment