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>

提交重置代码

自动运行

全屏