Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 11 : Padding pada CSS

By Web Design Purbalingga Post a Comment

Padding pada CSS – Pada materi sebelumnya sudah di bahas tentang margin, sekarang masuk pada materi tentang padding. Margin dan padding biasanya selalu digunakan secara bersamaan pada baris kode css. Letak perbedaan keduanya hanya pada letak pemberian ruangnya saja, selebihnya sama saja.

Padding pada CSS

Properti padding digunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan. Jika padding itu memberi ruang ‘di dalam batas’, sedangkan margin ‘di luar batas’. Perhatikan ilustrasinya berikut ini

Agar lebih jelasnya, perhatikan contoh kodingnya berikut ini. Ketikan pada file html kalian
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <p class="para">Elemen ini memiliki margin 50 pixel</p>
 <p class="parag">Elemen ini memiliki padding 50 pixel</p>
</body>
</html>
Dan tambahkan css berikut ini
/*css untuk margin*/
.para {
 margin: 50px;
 border: 1px solid grey;
 background-color: yellow;
}
/*css untuk padding*/
.parag {
 padding: 50px;
 border: 1px solid grey;
 background-color: teal;
}
Hasilnya

Tambahan

Menambahkan property lebar atau width pada area konten suatu elemen. Area konten maksudnya adalah bagian di dalam padding, border, dan margin dari elemen itu sendiri. Bagaimana jika suatu elemen telah ditentukan lebarnya, dan kemudian nilai padding ditambahkan apa yang akan terjadi? Yang terjadi adalah lebar elemen akan dikalkulasikan dengan nilai padding yang sudah ditambahkan tadi. Lihat contohnya berikut ini
Ketikan baris html berikut dan cssnya
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <p class="para">Elemen ini memiliki lebar 230 pixel dengan padding 15 pixel</p><br>
  <p class="parag">Elemen ini memiliki lebar 230 pixel tanpa padding</p>
</body>
</html>
.para {
 background-color: yellow;
 width: 230px;
 padding: 15px;
}
.parag {
 background-color: aqua;
 width: 230px;
}
Hasilnya


Dari contoh di atas bisa disimpilkan bahwa nilai width (lebar) akan berubah bila kita menambahkan property padding.
Kemudian ada pertanyaan, bagaimana agar lebar (width) suatu elemen tidak berubah saat ditambahkan property padding? Maka dalam hal ini ada teori baru yaitu menambahkan property box-sizing.
Tambahkan kode css box-sizing: border-box; kedalam class ‘para’ sehingga baris kodenya seperti di bawah ini.
.para {
 background-color: yellow;
 width: 230px;
 padding: 25px;
 box-sizing: border-box;
}
Maka hasilnya akan seperti ini


Pada kode di atas, ditambahkan property box-sizing dengan nilai border-box dan juga untuk nilai paddingnya bertambah menjadi 25 pixel serta nilai width (lebar) nya tetap. Ini menyimpulkan bahwa saat kita menambahkan property box-sizing, maka elemen akan tetap mempertahankan lebarnya sekalipun nilai padding semakin tinggi.
Jika ada pertanyaan, silahkan tinggalkan pertanyaan kalian di kolom komentar. Sekian materi kali ini tentang Padding pada CSS, dan sampai jumpa di materi menarik selanjutnya.

Post a Comment for "Materi 11 : Padding pada CSS"