Question

不确定为什么当我应用边框时，它似乎不正确，边框应该没有间距。出了点问题，但无法调试，需要帮助。

<div id="DIV_1">
  <div id="DIV_2">
    PayPal
  </div>
  <div id="DIV_3">
    Online Banking
  </div>
  <div id="DIV_4">
    Debit/Credit Card
  </div>
</div>

Answer 1

使用inline-block时产生的问题是，HTML中的whitespace在屏幕上变为visual space。

一个简单的解决方案是将font-size: 0;设置为父元素，并为其子元素指定必需的font-size。

* {
  padding: 0;
  margin: 0;
}
#DIV_1 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  height: 42px;
  text-align: center;
  vertical-align: top;
  width: 880px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 440px 21px;
  transform-origin: 440px 21px;
  background: rgb(67, 82, 85) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(255, 255, 255);
  font-size: 0;
  outline: rgb(255, 255, 255) none 0px;
}
/*#DIV_1*/

#DIV_2 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  height: 42px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  width: 290.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 145.188px 21px;
  transform-origin: 145.188px 21px;
  border-top: 0px none rgb(255, 255, 255);
  border-right: 1px solid rgb(255, 255, 255);
  border-bottom: 0px none rgb(255, 255, 255);
  border-left: 0px none rgb(255, 255, 255);
  font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
  outline: rgb(255, 255, 255) none 0px;
  padding: 10px;
}
/*#DIV_2*/

#DIV_3 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  height: 42px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  width: 290.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 145.188px 21px;
  transform-origin: 145.188px 21px;
  background: rgb(204, 0, 51) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(255, 255, 255);
  font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
  outline: rgb(255, 255, 255) none 0px;
  padding: 10px;
}
/*#DIV_3*/

#DIV_4 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  height: 42px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  width: 290.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 145.188px 21px;
  transform-origin: 145.188px 21px;
  border-top: 0px none rgb(255, 255, 255);
  border-right: 0px none rgb(255, 255, 255);
  border-bottom: 0px none rgb(255, 255, 255);
  border-left: 1px solid rgb(255, 255, 255);
  font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
  outline: rgb(255, 255, 255) none 0px;
  padding: 10px;
}
/*#DIV_4*/

<div id="DIV_1">
  <div id="DIV_2">
    PayPal
  </div>
  <div id="DIV_3">
    Online Banking
  </div>
  <div id="DIV_4">
    Debit/Credit Card
  </div>
</div>

参考Remove Whitespace Between Inline-Block Elements

Answer 2

我刚刚更新了你的小提琴here，我刚刚删除了div's的一些边框，看它是否正确。

有很多方法可以解决这个问题。关于你的一面。我刚刚删除了div_2，div_3和div_4之间的空格。

用于其他解决方案并进一步解释。你可以参考这个site.

Answer 3

您还可以在每个div上添加负边距。

div.yourClass {
    margin-left: -4px;
}

Answer 4

您在border-right和left中添加了1px和div2 div4，这就产生了问题，您可以正确使用它们进行对齐float：left，如下所示，如果您想继续使用代码，那么只需从div2和div4中删除1px的边框。

#DIV_1 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  height: 42px;
  text-align: center;
  vertical-align: top;
  width: 880px;
  perspective-origin: 440px 21px;
  transform-origin: 440px 21px;
  background: #111;
  border: 0px none rgb(255, 255, 255);
  font: normal normal 300 normal 16px / 22.8571px Lato, sans-serif;
  outline: rgb(255, 255, 255) none 0px;
  float:left;
}


/*#DIV_1*/

#DIV_2 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  height: 42px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  width: 200px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 10px;
  float:left;
  background:#ccc;
}


/*#DIV_2*/

#DIV_3 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  height: 42px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  width: 200px;
  perspective-origin: 145.188px 21px;
  transform-origin: 145.188px 21px;
  background: #f22;
  padding: 10px;
  float:left;
  }


/*#DIV_3*/

#DIV_4 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  height: 42px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  width: 200px;
  perspective-origin: 145.188px 21px;
  transform-origin: 145.188px 21px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 10px;
  float:left;
  background:#f2f;
}

3列DIV之间的额外空间

4 个答案: