如何删除具有适当显示效果和内联块值的div内的填充

Question

如何在显示设置为“ inline-block”的情况下从div内部删除填充。

下面是html和CSS。

.showExpCusWrap {
  background-color: #A8D3FF;
  display: inline-block;
  border: 1px solid #004F9D;
  padding: 0px 10px;
  font-family: Tahoma;
}

.showExpCusWrap label {
  font-size: 0.9em;
  margin: 0px;
  padding: 0px;
}

.showExpCusWrap input[type="date"] {
  margin: 0px;
  padding: 0px;
}

<div class="showExpCusWrap">
  <label for="showExpFrom">From</label>
  <input type="date" name="showExpFrom" id="showExpFrom">
  <label for="showExpTo">To</label>
  <input type="date" name="showExpTo" id="showExpTo">
  <input type="button" name="showExpCus" id="showExpCus" value="Show" class="exp-button-small">
</div>

这是它的外观。请注意内部的顶部和底部填充。

我已经检查了浏览器的默认样式。它不设置任何填充。那么，如何删除那些？我希望div中的所有元素在顶部或底部之间都没有任何间距。

Answer 1

在编辑您的问题时，我意识到没有问题。

这是您发送的所有代码的摘要。

.showExpCusWrap {
  background-color: #A8D3FF;
  display: inline-block;
  border: 1px solid #004F9D;
  padding: 0px 10px;
  font-family: Tahoma;
}
.showExpCusWrap label {
  font-size: 0.9em;
  margin: 0px;
  padding: 0px;
}
.showExpCusWrap input[type="date"]{
  margin: 0px;
  padding: 0px;
}

<div class="showExpCusWrap">
      <label for="showExpFrom">From</label>
      <input type="date" name="showExpFrom" id="showExpFrom">
      <label for="showExpTo">To</label>
      <input type="date" name="showExpTo" id="showExpTo">
      <input type="button" name="showExpCus" id="showExpCus" value="Show" class="exp-button-small">
    </div>

Answer 2

您可以使用line-height增加或减少它，这当然要通过不同的浏览器进行检查。.（表单元素不仅是html标记，而且还是浏览器的一部分）。

.showExpCusWrap {
  background-color: #A8D3FF;
  display: inline-block;
  border: 1px solid #004F9D;
  padding:  10px;
  font-family: Tahoma;
}

.showExpCusWrap label {
  font-size: 0.9em;
  margin: 0px;
  padding: 0px;
}

.showExpCusWrap input[type="date"] {
  margin: 0px;
  padding: 0px;
}


/* increase all
label, input:not([type="button"]) {
line-height:1.4em;
}
*/

label,
input {
  vertical-align: middle;
  box-sizing:border-box;
}
/* or decrease the one 
[type="button"] {
  line-height: 1em;
}

<div class="showExpCusWrap">
  <label for="showExpFrom">From</label>
  <input type="date" name="showExpFrom" id="showExpFrom">
  <label for="showExpTo">To</label>
  <input type="date" name="showExpTo" id="showExpTo">
  <input type="button" name="showExpCus" id="showExpCus" value="Show" class="exp-button-small">
</div>

Answer 3

我来过这个solution。可能这就是您要寻找的解决方案。在您的 /* add the following code*/ line-height:1; font-size:0.9em; 类中，添加了以下几行CSS，它对我有用。

font-size

当您声明一个具有em值的相对line-height:1;时；因此，为了调整内联块的高度，我借助.showExpCusWrap { background-color: #A8D3FF; display: inline-block; border: 1px solid #004F9D; padding: 0px 10px; font-family: Tahoma; /* add the following code*/ line-height: 1; font-size: 0.9em; } .showExpCusWrap label { font-size: 0.9em; margin: 0px; padding: 0px; } .showExpCusWrap input[type="date"] { margin: 0px; padding: 0px; } * { box-sizing: border-box; }获得了相同的高度。这是完整的代码给您。

<div class="showExpCusWrap">
  <label for="showExpFrom">From</label>
  <input type="date" name="showExpFrom" id="showExpFrom">
  <label for="showExpTo">To</label>
  <input type="date" name="showExpTo" id="showExpTo">
  <input type="button" name="showExpCus" id="showExpCus" value="Show" class="exp-button-small">
</div>

This API project is not authorized to use this API. Please ensure this API is activated in the Google Developers Console: https://console.developers.google.com/apis/api/places_backend?project=_,