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

综合技术 2017-12-14

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!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

#319: How Stripe Designs Beautiful Websites Web Content Accessibility Guidelines For People Who Haven't Read Them A detailed look over the ...
: Rolling CSS rotation keep position on ... :) Thanks so much for your time guys. I am rotating an object with CSS upon hovering, and would...
PocketGrid Documentation Table of Contents Loading... Quick start Here is the minimal markup you need to put in your pa...
CakePHP 3.0 echo css file content in te... I have css stylesheet for all e-mail templates which is placed in the /webroot/css/email-layout.cs...