html - 为什么table-cell div中有一个额外的空间？

Question

我想弄清楚为什么我的布局中有多余的不需要的空间，我将其涂成红色以标识不再存在的空间。

我做错了什么？

这是一张图片:

这是有问题的 HTML 和 CSS:

* {
  font-family: Segoe UI;
  font-size: 9pt;
}
body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: rgb(187, 195, 203);
}
#wrapper {
  width: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgb(112, 112, 112);
}
#box3 {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
}
#box1 {
  background: rgb(141, 155, 169);
  font-weight: bold;
  padding: 3px;
  color: #FFF;
}
#box2 {
  background: rgb(240, 240, 240);
  border-top: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
  padding: 3px;
}
#box3 {
  display: table;
  width: 100%;
}
#box4 {
  border-left: 0;
  border-right: 0;
  border-top: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
}
#box5 {
  background: rgb(240, 240, 240);
  padding: 5px;
  text-align: center;
}
#left {
  display: table-cell;
  width: 200px;
  height: 350px;
  background: #FFF;
  border-right: 1px solid rgb(180, 180, 180);
}
​​ #right {
  display: table-cell;
  width: auto;
}
/* CSS STYLING FOR THE FILE NUMBER & RECENT DROP DOWN SELECT */
.dropdown dd,
.dropdown ul {
  margin: 0px;
  padding: 0px;
}
.dropdown dd {
  position: relative;
}
.dropdown dt {
  border-top: 1px solid rgb(180, 180, 180);
  border-left: 1px solid rgb(180, 180, 180);
  border-right: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
  width: 170px;
  position: relative;
  padding: 1px;
}
.dropdown dt:hover,
.dropdown dt:focus {
  color: #5d4617;
  border-color: rgb(180, 180, 180);
}
.dropdown dt input[type=text] {
  border: 0;
  width: 100%;
  box-sizing: border-box;
}
.dropdown dt input[type=button] {
  border: 0;
  width: 15px;
  height: 18px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 1px;
  right: 0;
}
.dropdown dd ul {
  border-left: 1px solid rgb(180, 180, 180);
  border-right: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 1px;
  position: absolute;
  width: auto;
  min-width: 170px;
  list-style: none;
  cursor: pointer;
  background: #FFF;
}
.dropdown dd ul li {
  padding: 2px;
  display: block;
}
.dropdown dd ul li:hover {
  background-color: rgb(232, 232, 232);
  font-weight: bold;
}
#field_img {
  position: absolute;
  left: 0px;
  top: 2px;
}
.clear {
  clear: both;
}

<div id="wrapper">
  <div id="box1">App Title</div>
  <div id="box2">Search Bar</div>
  <div style=" border: 0; padding: 3px; text-align: center;">test</div>
  <div id="box3" style="background: red;">
    <div id="left">
      <div id="menu_wrapper">
        <ul id="menu">
          <li data-show="#1">File Information</li>
          <li data-show="#2">Comments</li>
        </ul>
      </div>
    </div>
    <div class="right" style="background: rgb(240,240,240); height: 350px;">
      <!-- CONTENT [TAB 1] -->
      <div id="1" class="hidden tab" style="width: 100%;">
        <form name="register">
          <fieldset>
            <legend>Member Registration</legend>
            <label>Username</label>
            <input type="text" name="name">
            <br />

            <label>E-Mail</label>
            <input type="text" name="email">
            <br />

            <label>Password</label>
            <input type="password" name="password">
            <br />

            <label>Confirm password</label>
            <input type="password" name="confirm_password">
            <br />

            <label>Comments (optional)</label>
            <textarea name="message" rows="5" cols="25"></textarea>
            <br />

            <label>&nbsp;</label>
            <input type="checkbox" name="i_agree" value="1">I agree to the terms & conditions
            <br />

          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div id="box4">grid here</div>
  <div id="box5">buttons here</div>
</div>

Answer 1

这是因为嵌套的 ul.menu 元素上的默认 margin。由于您可能不想删除它，您可以将 vertical-align: top 添加到 #left 元素。这样做时，#right 元素的对齐将不对应于上述 ul.menu 元素文本的基线。

Working Example

#left {
  display: table-cell;
  vertical-align: top; /* Added.. */
  width: 200px;
  height: 350px;
  background: #FFF;
  border-right: 1px solid rgb(180, 180, 180);
}