2.兄弟之间的margin-top 和 margin-bottom 会叠压

最新推荐文章于 2022-09-25 14:34:56 发布

咖喱鸡块

最新推荐文章于 2022-09-25 14:34:56 发布

阅读量2.1k

点赞数 1

分类专栏： css 文章标签：兄弟margin-top-bottom叠

本文链接：https://blog.csdn.net/hh279768876/article/details/51970098

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

兄弟之间的margin-top 和 margin-bottom 会叠压

所以当给兄弟之间上下排布控制距离的时候只需要控制器中一个div即可

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>asd</title>
   <link rel="stylesheet" href="css/reset.css">
   <style type="text/css">
   #a{
       margin: 0 auto;
       width: 500px;
       height: 500px;
       background: blue;
   }
   #b{
       width: 300px;
       height: 300px;
       background: red;

   }
   #c{
       width: 100px;
       height: 100px;
       background: yellow;
       margin-top:20px;
       margin-bottom:20px;
   }
   #d{
       width: 100px;
       height: 100px;
       background: black;
       margin-top:40px;
   }
   </style>
</head>
<body>
<div id="a">
   <ul id="b">
       <li id="c">

       </li>
       <li id="d">

       </li>
   </ul>
</div>
</body>
</html>