Model kotak--sempadan
Jarak antara
elemen dan elemen lain boleh ditetapkan menggunakan jidar. Sempadan juga boleh dibahagikan kepada atas, kanan, bawah dan kiri. Kod berikut:
div{margin:20px 10px 15px 30px;}
juga boleh ditulis secara berasingan:
div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; }
Jika jidar atas, kanan, bawah dan kiri adalah 10px, ia boleh ditulis seperti ini:
div{ margin:10px;}
Jika sempadan atas dan bawah Sama ialah 10px, dan kiri dan kanan adalah sama 20px Anda boleh menulisnya seperti ini:
div{ margin:10px 20px;}
Untuk meringkaskan: perbezaan antara padding dan margin, padding berada di dalam sempadan, dan margin berada di luar sempadan.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>边距</title> <style type="text/css"> div{ width:300px; height:300px; border:1px solid red; } #box1{margin-bottom:30px;} </style> </head> <body> <div id="box1">box1</div> <div id="box2">box2</div> </body> </html>