Why is there extra space in the table-cell division?

I am trying to figure out as to why there is an extra unwanted space in my layout, I have colored it red to identify the space that is to cease to exist.

What am I doing wrong?

Here is a picture:

Here is the HTML & CSS in question:

* {
  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;
}
App Title
Search Bar
test
grid here
buttons here

It’s because of the default margin on the nested ul.menu element. Since you probably don’t want to remove that, you could add vertical-align: top to the #left element. In doing so, the #right element’s alignment will not correspond to the baseline of the aforementioned ul.menu element’s text.

Working Example

#left {
  display: table-cell;
  vertical-align: top; /* Added.. */
  width: 200px;
  height: 350px;
  background: #FFF;
  border-right: 1px solid rgb(180, 180, 180);
}
Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Why is there extra space in the table-cell division?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录