html - 如何删除具有显示属性和内联 block 值的 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>