masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial asas CSS: padding dan sifat margin

Sifat pelapik CSS: jarak antara garis sempadan dan kandungan

Nota: Apa yang biasa kita panggil sifat lebar dan tinggi, ia Merujuk kepada lebar dan ketinggian kandungan, tidak termasuk jidar dalam dan luar serta garis sempadan.

  • padding-left: jarak padding dalam kiri, jarak antara baris kiri dan kandungan.

  • lapik-kanan: jarak pelapik dalam yang betul, jarak antara baris kanan dan kandungan.

  • padding-top: jarak pelapik dalam atas, jarak antara tepi atas dan kandungan.

  • padding-bottom: jarak antara padding bawah dan garis bawah ke kandungan.

  • Borang ringkasan

  • lapik:10px; //Padding dalam pada empat sisi ialah 10px

  • padding:10px 20px; //10px untuk atas dan bawah, 20px untuk kiri dan kanan

  • padding:5px 10px 20px; dan 10px untuk kiri dan kanan , bahagian bawah ialah 20px

  • padding:5px 10px 15px 20px; //Turutan mestilah "atas, kanan, bawah, kiri"

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    .box{
        border:1px solid red;
        background-color:#f0f0f0;
        width:300px;
        padding:20px;
    } 
    </style>
    </head>
    <body>
        <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

Harta margin CSS: jarak keluar dari tepi

  • margin- kiri: jarak keluar dari garisan kiri.

  • margin-kanan: jarak keluar dari garis tepi kanan

  • margin-atas: jarak keluar dari garis tepi atas.

  • margin-bawah: jarak keluar dari garis bawah.

  • Borang ringkasan

  • margin:10px; //Empat jidar luar ialah 10px

  • margin:10px 20px //Jing atas dan bawah 10px, jidar kiri dan kanan 20px

  • jidar:5px 10px 15px; //Jingping atas dan bawah 5px, kiri dan jidar kanan 10px, jidar bawah 15px

  • margin:5px 10px 15px 20px // Susunan mestilah "atas, kanan, bawah, kiri"

    • <🎜; >
    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    .box{
        border:1px solid red;
        background-color:#f0f0f0;
        width:300px;
        margin:20px;
    } 
    </style>
    </head>
    <body>
        <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

Nota: padding dan margin mudah dikelirukan, sila perhatikan dengan teliti perbezaan output antara kedua-dua contoh

Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box{ border:1px solid red; background-color:#f0f0f0; width:300px; padding:20px; } </style> </head> <body> <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。 </div> </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)  492769 permainan