简单 HTML + CSS 页面中出现奇怪的间隙

Question

我正在构建一个非常简单的网页，该网页将被分成 4 个均匀的四分之一页面，每个角落都有一个 div。不过，我运行遇到了这个奇怪的问题 - 其中一个 div 一直表现得好像有什么东西在它上面，但是当我检查该元素时我看不到那里的任何东西。这是一张图片：

这里是完整的HTML和CSS（不是很长）：

<html>

<head>

    <style type="text/css">

        *{
            margin: 0;
            font-family: "Helvetica", helvetica, arial, sans-serif;
        }

        html, body{
            height: 100%;
        }

        h2{
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .qrtr{
            width: 50%;
            display: inline-block;
            height: 50%;
            background: darkgrey;
        }

        #cat{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            font-size: 16px;
        }

        #viewer{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            background: white;
        }

    </style>

</head>

<body>

<div class="qrtr">
    <h2>Catalog</h2>
    <select id="cat" name="cat" size="50">
        <option>Hello</option>
        <option>Palm Trees</option>
        <option>Chocolate Milk</option>
        <option>Code</option>
    </select>
</div><div class="qrtr"><h2>View</h2><div id="viewer">

    </div>
</div>

</body>

</html>

当我检查这些元素时，我看不出有任何间隙存在。我试过弄乱一些 CSS 来让它就位，但我想不出正确的方法。除了我想找到解决方案之外，我真的很想了解为什么当我显然没有写任何 CSS 来让它故意这样做时它会这样。任何人都知道是什么原因造成的？它甚至在 JSFiddle.

中做到了

Answer 1

解释在http://www.w3.org/TR/CSS21/visudet.html最后一句：

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

第一个 div 中的 select 元素定义了它的最后一个行框。第二个 div 中的 h2 元素定义了它的最后一个行框。（viewer 没有行框，因为它没有内容。）

因此，div 对齐，因此 select 和 h2 "sitting" 在同一行。

知道这一点，有几个解决问题的方法：

将 vertical-align: top; 添加到 .qrtr 的样式：

* {
  margin: 0;
  font-family: "Helvetica", helvetica, arial, sans-serif;
}
html,
body {
  height: 100%;
}
h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5%;
}
.qrtr {
  width: 50%;
  display: inline-block;
  height: 50%;
  background: darkgrey;
  vertical-align: top;
}
#cat {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  font-size: 16px;
}
#viewer {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  background: white;
}

<div class="qrtr">
  <h2>Catalog</h2>
  <select id="cat" name="cat" size="50">
    <option>Hello</option>
    <option>Palm Trees</option>
    <option>Chocolate Milk</option>
    <option>Code</option>
  </select>
</div><div class="qrtr">
  <h2>View</h2>
  <div id="viewer">

  </div>
</div>

添加overflow: hidden;（或overflow: auto;）做.qrtr的样式：

* {
  margin: 0;
  font-family: "Helvetica", helvetica, arial, sans-serif;
}
html,
body {
  height: 100%;
}
h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5%;
}
.qrtr {
  width: 50%;
  display: inline-block;
  height: 50%;
  background: darkgrey;
  overflow: hidden;
}
#cat {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  font-size: 16px;
}
#viewer {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  background: white;
}

<div class="qrtr">
  <h2>Catalog</h2>
  <select id="cat" name="cat" size="50">
    <option>Hello</option>
    <option>Palm Trees</option>
    <option>Chocolate Milk</option>
    <option>Code</option>
  </select>
</div><div class="qrtr">
  <h2>View</h2>
  <div id="viewer">

  </div>
</div>

Answer 2

        *{
            margin: 0;
            font-family: "Helvetica", helvetica, arial, sans-serif;
        }

        html, body{
            height: 100%;
        }

        h2{
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .qrtr{
            width: 50%;
            float:left;
            height: 50%;
            background: darkgrey;
        }

        #cat{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            font-size: 16px;
        }

        #viewer{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            background: white;
        }

<div class="qrtr">
    <h2>Catalog</h2>
    <select id="cat" name="cat" size="50">
        <option>Hello</option>
        <option>Palm Trees</option>
        <option>Chocolate Milk</option>
        <option>Code</option>
    </select>
</div><div class="qrtr"><h2>View</h2><div id="viewer">

    </div>
</div>

将 qrts 的 CSS 更改为

    .qrtr{
        width: 50%;
        float:left;
        height: 50%;
        background: darkgrey;
    }

简单 HTML + CSS 页面中出现奇怪的间隙

Strange gap occurring in simple HTML + CSS page

html

css

margins