Bagaimana cara membuat bantalan di CSS?

Padding CSS memungkinkan coder HTML untuk mengatur bantalan default atau ruang mati di luar elemen HTML.Manfaat dari melakukan ini adalah bahwa ia menyimpan coder dari mengulangi kode padding itu untuk setiap instance elemen itu, dan lebih mudah menciptakan konsistensi pada halaman.Elemen HTML yang akan empuk dapat berupa sejumlah hal, seperti paragraf, tabel, atau heading.

Untuk membuat bantalan di CSS, Anda akan terlebih dahulu harus mengidentifikasi elemen HTML yang ingin Anda pad.Elemen ini yang ingin Anda bantah ini dikenal sebagai pemilih.Kemudian, Anda ingin menentukan nilai padding yang sesuai.Ada lima jenis properti padding di CSS Mdash;satu untuk keempat sisi elemen sekaligus, dan empat lainnya untuk setiap sisi elemen (mis., Sisi kiri, sisi kanan, sisi atas atau sisi bawah).Properti yang memungkinkan programmer untuk menentukan nilai untuk keempat sisi elemen HTML sekaligus disebut properti steno .

Bahasa pengkodean yang digunakan untuk menentukan satu deklarasi padding CSS hanyalah kata "padding."Mengikuti label itu, adalah nilai -nilai yang relevan dari bantalan, atau, informasi tentang jumlah ruang yang diinginkan, biasanya diwakili oleh piksel atau persentase.Padding dan nilainya ditulis di dalam kawat gigi keriting atau kurung keriting (mis., {Dan}).Sebelumnya semua itu adalah elemen HTML yang akan di -empuk (mis., P untuk paragraf atau H2 untuk header level 2).

Dalam hal bagaimana nilai diwakili, nilai dapat diwakili dalam piksel (mis., 1px atau 5px), poin (mis., 1pt atau 5pt) atau inci (mis., 1in atau 5in), atau sentimeter (mis., 1cm atau 5cm).Nilai juga dapat dinyatakan sebagai persentase dari elemen HTML yang ditata.Jika nilainya 50%, misalnya, bantalan akan sama dengan setengah ukuran elemen.

Contoh -contoh berikut, adalah kode HTML untuk bantalan elemen HTML dengan cara nilai yang tercermin dalam persentase dan panjang, masing -masing.Jika hanya satu nilai yang ditetapkan, maka peramban web akan menetapkan bantalan ini ke keempat sisi elemen HTML.

Padding: 10%;
Padding: 100px;

Menambahkan lebih banyak nilai pada jenis deklarasi padding di atas akan menyebabkan browser web untuk menafsirkannya dengan cara tertentu.Jika dua nilai ditetapkan, yang pertama akan sesuai dengan bagian atas dan bawah, sedangkan yang kedua sesuai dengan kiri dan kanan.Tiga nilai akan menyebabkan yang pertama merujuk ke atas, yang kedua ke sisi kiri dan kanan, dan yang ketiga ke bagian bawah elemen HTML.Menetapkan maksimum empat nilai menyebabkan nilai pertama, kedua, ketiga, dan keempat sesuai dengan bagian atas, kanan, bawah, dan kiri elemen HTML, dalam urutan itu.Ketika lebih dari satu nilai disediakan, mereka harus dipisahkan oleh spasi dan diakhiri dengan semi-kolon, misalnya:

Padding: 10px 20px 10px 20px;

Padding di CSS dapat dilakukan satu sisi pada satu waktu juga.Dalam hal ini, ada empat properti bantalan lagi yang tersedia.Ini adalah padding-top,-right-right, bantalan bantalan, dan padding-left.Untuk membuat bantalan di CSS dengan cara yang lebih tepat ini, Anda harus memberi label properti dengan sintaks yang sama dengan deklarasi steno seperti di atas.Masing -masing properti padding ini hanya mengambil satu nilai dalam panjang atau persentase.Misalnya:

Padding-top: 10px;
Padding-Right: 20px;
Padding-Bottom: 10px;
Padding-Left: 20px;

Kode berikut membuat halaman web, menyatakan properti padding antara tag gaya, dankemudian menggunakannya dalam elemen paragraf yang ditentukan oleh tag P.Teks antara/ * dan */adalah catatan untuk menjelaskan jenis bantalan yang digunakan dan tidak akan dimasukkan dalam kode padding CSS.

lt; html gt;
lt; head gt;
lt; tipe gaya ' teks/css gt;
p.example1 {padding: 10px;} /* padding tangan pendek untuk keempat sisi* /
p.example2 {padding: 50px 30px;} /* padding tangan pendek untuk bagian atas dan bawah diikuti oleh kiridan kanan * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
Padding-left: 20px;
} / * Padding individual.*/
lt;/style gt;
lt;/head gt;

lt; body gt;
lt; p class ' example1 gt; teks ini memiliki bantalan yang sama di setiap sisi.Padding di setiap sisi adalah 10px. Lt;/p gt;
lt; p class ' example2 gt; teks ini memiliki bantalan atas dan bawah 50px dan padding kiri dan kanan 30px. Lt;/p gt;
lt; P Kelas p' "Contoh3" gt; teks ini memiliki bantalan atas 10px, bantalan kanan 20px, bantalan bawah 10px, dan bantalan kiri 20px. Lt;/p gt;
lt;/body gt;
lt;/html gt;;

Dalam contoh di atas, "Contoh1," dll., Adalah nama yang ditetapkan ke kelas, yang kemudian dirujuk dalam paragraf.Periode antara tag P dan nama kelas di awal kode menunjukkan deklarasi kelas yang ditugaskan untuk sebuah paragraf.Perhatikan kawat gigi setelah deklarasi kelas yang melampirkan penugasan nilai properti padding.

Meskipun ini mungkin tampak seperti banyak pekerjaan, ini jauh lebih tidak padat karya daripada menentukan padding untuk setiap paragraf individu.Anda dapat mendeklarasikan satu properti padding untuk elemen yang diinginkan, yang dalam contoh di atas adalah tag p, dan kemudian merujuk kelas saat Anda menggunakan elemen antara tag tubuh halaman.Jika hanya satu jenis bantalan yang diperlukan untuk semua paragraf, Anda tidak perlu menggunakan kelas sama sekali.Cukup gunakan kode berikut antara tag gaya, dan kemudian kode paragraf tanpa menentukan kelas apa pun.Kode ini akan berada di antara tag tubuh alih -alih kode dalam contoh di atas.

p {padding: 10px 20px 10px 20px;}

Padding CSS ini akan dibuat akan mempengaruhi semua paragraf meskipun tidak ada kelas yang ditentukan.