Beranda  ›  HTML  ›  Tutorial

Tutorial Belajar Padding di HTML

,


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:
nilaiHasil
padding:15px;
  • semua sisi 15px
padding:15px 8px;
  • atas dan bawah 15px
  • kanan dan kiri 8px
padding:15px 8px 4px;
  • atas 15px
  • kanan dan kiri 8px
  • bawah 4px
padding:15px 8px 4px 2px;
  • atas 15px
  • kanan 8px
  • bawah 4px
  • kiri 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.

Subscribe to receive free email updates:

0 Response to "Tutorial Belajar Padding di HTML"

Posting Komentar

Langganan: Posting Komentar (Atom)