CSS - Bantalan
The Padding properti memungkinkan Anda untuk menentukan berapa banyak ruang yang harus muncul antara isi elemen dan perbatasan -
Nilai atribut ini harus berupa panjang, persentase, atau kata mewarisi . Jika nilainya diwarisi , ia akan memiliki padding yang sama dengan elemen induknya. Jika persentase digunakan, persentase dari kotak berisi.
Properti CSS berikut dapat digunakan untuk mengontrol daftar. Anda juga dapat mengatur nilai yang berbeda untuk padding di setiap sisi kotak menggunakan properti berikut -
Itu padding-bottom menentukan bantalan bawah dari sebuah elemen.
Itu padding-top menentukan bantalan atas suatu elemen.
Itu padding-left menentukan padding kiri suatu elemen.
Itu padding-right menentukan padding yang tepat dari sebuah elemen.
Itu padding berfungsi sebagai singkatan dari properti sebelumnya.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh.
Properti padding-bottom
Properti padding-bottom menyetel padding bawah (spasi) dari sebuah elemen. Ini bisa mengambil nilai dalam hal panjang%.
Ini contohnya -
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Properti padding-top
Properti padding-top menyetel padding atas (spasi) dari sebuah elemen. Ini bisa mengambil nilai dalam hal panjang%.
Ini contohnya -
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Properti padding-left
Properti padding-left menyetel padding kiri (spasi) dari sebuah elemen. Ini bisa mengambil nilai dalam hal panjang%.
Ini contohnya -
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Properti padding-right
Properti padding-right menyetel padding (spasi) yang tepat dari sebuah elemen. Ini bisa mengambil nilai dalam hal panjang%.
Ini contohnya -
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Properti Padding
The Padding set properti kiri, kanan, atas dan padding bawah (ruang) dari suatu unsur. Ini bisa mengambil nilai dalam hal panjang%.
Ini contohnya -
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -