HTML+CSS 輕鬆入門之盒子模型之邊界

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

下面我們寫一個實例來講解；

首先我們先寫一段沒有使用邊界的程式碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
        width:200px;
        height:200px;
        border:1px solid red;
      }
  </style>
</head>
<body>
    <div id="dv1">php中文网</div>
    <div id="dv2">中华民族伟大复兴</div>
</body>
</html>

兩個div 都是在一起的，如果我想讓兩個div之間的距離有30像素，我該怎麼去寫css程式碼？

#dv2{margin-top:30px;}

#當我們加上這句程式碼，兩個div之間就有距離了

朋友可以分別試試右邊，下邊，左邊，看看什麼樣的一個效果

新建檔案

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 div{
 width:200px;
 height:200px;
 border:1px solid red;
 }
 </style>
</head>
<body>
 <div id="dv1">php中文网</div>
 <div id="dv2">中华民族伟大复兴</div>
</body>
</html>

提交重置程式碼

自動運行

全螢幕