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>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

HTML+CSS 轻松入门教程

  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

我又来了

加上#dv2{margin-top:30px;} 就看明白了

8年前    添加回复 0

仗义皆为屠狗辈 无情多为读书人

明白

8年前    添加回复 0

看山看水看代码

试了下,瞬间明白了

8年前    添加回复 0

烟雨江南

#dv2{margin-top:30px;}把这个代码放上去试了下,俩个div 之间的距离就有30px 明白了

8年前    添加回复 0

末日的春天

padding和margin的区别,padding在边框里,margin在边框外。

8年前    添加回复 0

关于盒子模型之边界的问题还有点不明白?

[最新 数据分析师 的回答] 关于盒子模型之边界的问题还有点不明白? -PHP中文网问答-关于盒子模型之边界的问题还有点不明白? -PHP中文网问答围观一下哦,学习一下。

时间:8年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~