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 contohbahagian seterusnya
