CSS 基础学习-061 使用外边距合并

由 hrs, 25 九月, 2021

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div{
        width:150px;
        height:150px;
        margin:0px;
        padding:0px;
        border:0;
      }

      #d1{
        background-color:red;
        margin-top:20px;
        margin-bottom:20px;

      }

      #d2{
        background-color:blue;
        margin-top:10px;
      }
    </style>
  </head>
  <body>
    <h1>css外边距合并</h1>
    <div id="d1"></div>
    <div id="d2"></div>
    <p>请注意，两个div之间的外边距是20px，而不是30px（20px＋10px）。</p>
  </body>
</html>

运行效果：

css-061.png

标签

评论