masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Padding CSS

Padding CSS

Sifat CSS Padding mentakrifkan ruang antara sempadan elemen dan kandungannya.

Padding

Apabila Padding (padding) elemen dikosongkan, kawasan " akan diisi dengan warna latar belakang elemen.

Gunakan atribut isi sahaja untuk menukar pelapik atas, bawah, kiri dan kanan. Sifat isian singkatan juga boleh digunakan, setelah diubah semuanya berubah.

Nilai atribut Padding dinyatakan dalam piksel, sentimeter dan peratusan

Atribut padding CSS

Dalam CSS, adalah mungkin untuk menentukan padding berbeza untuk sisi yang berbeza:

Instance

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.padding
        {
            padding-top:25px;
            padding-bottom:25px;
            padding-right:50px;
            padding-left:50px;
        }
    </style>
</head>

<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>

</html>

Jalankan atur cara untuk mencubanya

Padding - atribut trengkas

Untuk memendekkan kod, adalah mungkin untuk menentukan semua sifat padding dalam satu atribut.

Inilah yang dipanggil atribut singkatan. Singkatan bagi semua sifat padding ialah "padding":

Sifat padding, yang boleh mempunyai satu hingga empat nilai.

padding:25px 50px 75px 100px;

padding atas ialah 25px

padding kanan ialah 50px

padding bawah ialah 75px><🎜 🎜>Padding kiri ialah 100px

padding: 25px 50px 75px; 75px

padding:25px 50px;

padding atas dan bawah ialah 25px

padding kiri dan kanan ialah 50px

padding:25px ;

Semua padding ialah 25px

Contoh

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.padding
        {
            padding:25px 50px;
        }
    </style>
</head>

<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>

</html>

Jalankan program dan mencubanya

Contoh

menunjukkan penggunaan atribut yang disingkatkan untuk menetapkan semua sifat pelapik dalam pengisytiharan, yang boleh mempunyai satu hingga empat nilai. 
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.ex1 {padding:2cm;}
        p.ex2 {padding:0.5cm 3cm;}
    </style>
</head>

<body>
<p class="ex1">这个文本填充两边相等。填充每边2厘米。</p>
<p class="ex2">这个文本填充两边相等。填充每边2厘米。</p>
</body>
</html>

Jalankan program dan cuba

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p.ex1 {padding:2cm;} p.ex2 {padding:0.5cm 3cm;} </style> </head> <body> <p class="ex1">这个文本填充两边相等。填充每边2厘米。</p> <p class="ex2">这个文本填充两边相等。填充每边2厘米。</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492290 permainan