Tutorial CSS kali ini menjelaskan Pengaturan Padding HTML dengan CSS. Properti padding memungkinkan Anda untuk menentukan berapa banyak ruang yang harus muncul antara isi elemen dan border
Tutorial CSS kali ini menjelaskan Pengaturan Padding HTML dengan CSS. Properti padding memungkinkan Anda untuk menentukan berapa banyak ruang yang harus muncul antara isi elemen dan border:
Nilai atribut ini harus baik panjang, persentase, atau inherit kata. Jika nilai inherit, ia akan memiliki padding sama dengan elemen induknya. Jika persentase digunakan, persentasenya dari kotak yang berisi.
Properti CSS berikut ini dapat digunakan untuk mengontrol list. Anda juga dapat mengatur nilai yang berbeda untuk padding di setiap sisi kotak menggunakan properti berikut -
- Padding-bottom menentukan padding bawah elemen.
- Padding-top menentukan padding atas sebuah elemen.
- Padding-left menentukan padding kiri elemen.
- Padding-right menentukan padding kanan elemen.
- padding menyajikan sebagai singkatan untuk sifat sebelumnya.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh-contoh.
Properti padding-bottom
Properti padding-bottom set bottom padding (space) dari suatu unsur. Hal ini dapat mengambil nilai dari segi panjang%.
Berikut adalah contoh -
<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 menetapkan padding atas (ruang) dari suatu unsur. Hal ini dapat mengambil nilai dari segi panjang%.
Berikut adalah contoh -
<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 menetapkan padding left (ruang) dari suatu unsur. Hal ini dapat mengambil nilai dari segi panjang%.
Berikut adalah contoh :
<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 menetapkan padding right (spasi) dari suatu unsur. Hal ini dapat mengambil nilai dari segi panjang%.
Berikut adalah contoh :
<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
Properti padding menetapkan left, kanan, atas dan padding bawah (ruang) dari suatu unsur. Hal ini dapat mengambil nilai dari segi panjang%.
Berikut adalah contoh -
<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:
COMMENTS