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

Question

我试图找出为什么我的布局中有一个额外的不需要的空间，我把它涂成红色以识别不再存在的空间。

我做错了什么？

这是一张图片：

这是HTML＆amp;有问题的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

这是因为嵌套margin元素上的默认ul.menu。由于您可能不想删除它，因此可以将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);
}

Answer 2

一个问题是左div #left是一个table-cell，而右div .right是一个块。如果你解决了这个问题，问题就会消失。

• 给左侧div float:left而不是display:table-cell
• 或者，也给出正确的div display:table-cell。