盒子模型--邊界

元素與其它元素之間的距離可以使用邊界（margin）來設定。邊界也是可分為上、右、下、左。如下程式碼：

div{margin:20px 10px 15px 30px;}

也可以分開寫：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的邊界都為10px;可以這麼寫：

div{ margin:10px;}

如果上下邊界一樣為10px，左右一樣為20px，可以這麼寫：

div{ margin:10px 20px;}

總結一下：padding和margin的區別，padding在邊框裡，margin在邊框外。

<!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>

繼續學習

新建檔案

<!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>

重置程式碼

自動運行

提交

預覽 Clear