填充设置为 0，但仍存在填充

Question

希望你能帮助我。"form_input_username"的顶部有一个意想不到的填充物。这是问题的链接：http://nl.tinypic.com/r/242xw1e/8 。希望你能帮助我！

#input_username_total,
#input_password_total {
  overflow: hidden;
  display: block;
  width: 80%;
  margin-top: 2%;
  display: table;
}
#input_username,
#input_password {
  background: url('../img/blank_input_login.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: -2px;
  display: table-cell;
}
#input_img {
  width: 16%;
  display: table-cell;
}
#pic_username,
#pic_password {
  width: 100%;
}
#form_input_username,
#form_input_password {
  font-size: 5.5vw;
  font-family: 'Open Sans', sans-serif;
  border: none;
  color: white;
  background: transparent;
  padding-left: 4%;
  padding-right: 2%;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 100%;
  width: 94%;
}

<div id="input_username_total" class="center">
  <div id="input_img">
    <img src="img/username_pic.png" id="pic_username"></img>
  </div>
  <div id="input_username">
    <input type="text" id="form_input_username" placeholder="Username" />
  </div>
</div>

Answer 1

你只需要像这样将vertical-align添加到包含的div中：

#input_username_total,
#input_password_total {
  overflow: hidden;
  display: block;
  width: 80%;
  margin-top: 2%;
  display: table;
}
#input_username,
#input_password {
  background: url('../img/blank_input_login.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: -2px;
  display: table-cell;
  vertical-align: middle;
}
#input_img {
  width: 16%;
  display: table-cell;
}
#pic_username,
#pic_password {
  width: 100%;
}
#form_input_username,
#form_input_password {
  font-size: 5.5vw;
  font-family: 'Open Sans', sans-serif;
  border: none;
  color: white;
  background: transparent;
  padding-left: 4%;
  padding-right: 2%;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 100%;
  width: 94%;
}

<div id="input_username_total" class="center">
  <div id="input_img">
    <img src="img/username_pic.png" id="pic_username"></img>
  </div>
  <div id="input_username">
    <input type="text" id="form_input_username" placeholder="Username" />
  </div>
</div>

然后，这会将所有内容对齐到中间，从而使所有内容保持一致。

Answer 2

您使用display: table-cell并排设置元素。

如果要使文本输入"居中"，请参阅vertical-align

#input_username, #input_password {vertical-align: middle}

http://jsfiddle.net/11z1rbs7/1/

但我认为更好的解决方案是使用 float: left; 而不是 display: table-cell ，元素将以另一种方式对齐，我认为您的问题会更少。

Answer 3

请点击jsfiddle链接，正如NoLiver92指出的那样，你有一些影响它的余量。

http://jsfiddle.net/cze3u1wz/

我刚刚删除了边距，新的css是：

#input_username_total, #input_password_total {
 overflow: hidden;
 display: block;
 width: 80%;
 display: table;
}
#input_username, #input_password {
 background: url('../img/blank_input_login.png');
 background-repeat: no-repeat;
 background-size: 100% 100%;
 margin-left: -2px;
 display: table-cell;
 }
#input_img {
 width: 16%;
 display: table-cell;
}
#pic_username, #pic_password {
 width: 100%;
}
#form_input_username, #form_input_password {
 font-size: 5.5vw;
 font-family: 'Open Sans', sans-serif;
 border: none;
 color: white;
 background: transparent;
 padding-left: 4%;
 padding-right: 2%;
 padding-top: 0px;
 padding-bottom: 0px;
 height: 100%;
 width: 94%;
}