Question

在google chrome html / css视图的打印屏幕下方。

另一个元素margin: 10px;，因此彼此应该是20px。

但他们并非如此。它们相距10px，就像边缘连接一样。

＆＃13;

body {
  margin: 0;
  background-image: url("2.png");
  background-repeat: repeat-x;
    font-family: 'Verdana';
    font-size: 17px;
}
#logo {
  background-image: url("logo.png");
  width: 527px;
  height: 58px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7px;
}
.hidden {
  display: none;
}
.nav {
  background-color: #55585d;
  height: auto;
  margin-top: 10px;
  border-bottom: 2px solid #44474c;
  border-top: 2px solid #44474c;
  text-align: center;
}
.nav > ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.nav > ul li {
  display: inline-block;
  padding: 5px;
  margin-right: 30px;
  font-weight: 700;
}
/* 1195px width */
#center {
  width: 1195px;
  margin-left: auto;
  margin-right: auto;
}
#container {
  width: 864px;
  min-height: 500px;
  margin-left: 16px;
  float: left;
}
.post {
  width: 392px;
  height: 453px;
  box-shadow: 3px -3px 6px 0px #000000,
  -1px 1px 1px 0px #000000;
  margin: 10px;
  float: left;
}
#aside {
  width: 315px;
  float: left;
  min-height: 500px;
}
.abox1 {
  margin: 10px;
  width: 279px;
  height: 453px;
  box-shadow: 3px -3px 6px 0px #000000,
  -1px 1px 1px 0px #000000;
}

＆＃13;

<!DOCTYPE html>
<html lang="pl">
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Devloger</title>
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<header>
  <div id="logo"></div>
  <h1 class="hidden">Devloger</h1>
  <nav>
    <div class="nav">
      <ul>
        <li>
          Strona Główna
        </li>
        <li>
          Kategorie
        </li>
        <li>
          Spis Treści
        </li>
        <li>
          Współpraca
        </li>
        <li>
          Kontakt
        </li>
      </ul>
    </div>
  </nav>
</header>
<div id="center">
  <main>
    <div id="container">
      <div class="post">
      </div>
      <div class="post">
      </div>
      <div class="post">
      </div>
      <div class="post">
      </div>
      <div class="post">
      </div>
      <div class="clear" style="clear: both;"></div>
    </div>
  </main>
  <aside>
    <div id="aside">
      <div class="abox1">
      </div>
      <div class="abox1">
      </div>
      <div class="abox1">
      </div>
    </div>
  </aside>
</div>
<div class="clear" style="clear: both;"></div>
</body>
</html>

＆＃13;

Answer 1

有些情况（you can read about it here），其中元素之间的边距被折叠（重叠，一个在另一个之上），这是一个预期的行为，因此它不是错误。

这是其中一个案例和您当前的问题：

相邻的兄弟姐妹

相邻兄弟姐妹的边缘被折叠（除非后面的兄弟姐妹需要通过花车清除）。

首先，您有一些具有该边距的.post块，但这些边距运行良好，因为这些块是浮动的。如果您从float: left课程中删除.post，则会看到这些块边距也会折叠。

知道边缘折叠存在，您可以在设计布局时考虑到它：

页面流从左到右，从上到下。因此，不要定义margin-top和margin-bottom，而只定义margin-bottom。

aside {
  width: 315px;
  float: left;
  min-height: 500px;
}
.abox1 {
  margin: 0 10px 20px 10px;
  width: 279px;
  height: 453px;
  box-shadow: 3px -3px 6px 0px #000000,
  -1px 1px 1px 0px #000000;
}

<aside>
  <div class="abox1"></div>
  <div class="abox1"></div>
  <div class="abox1"></div>
</aside>

CSS保证金连接？

1 个答案: