Div具有背景颜色和边框间距

Question

我在borders和background color面临一个奇怪的问题。如果我将border应用于div left，那么它会在最右边留下一些空格。因此background color对于第一个处于活动状态的标签不会延长100％。

.col-3 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 26.1%;
}
.tabs .col-3 {
  border-left: 2px solid #ffffff;
  cursor: pointer;
}
.col-3.active {
  background: #505050;
}
.container {
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  position: relative;
}
.full-width {
  background: #dfdedb none repeat scroll 0 0;
  width: 100%;
}
.main-container {
  margin: 0 auto;
  max-width: 1200px;
}

<div class="full-width container tabs">
  <div class="main-container active">
    <div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
      <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
    <div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
    <div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
  </div>
</div>

我做错了什么。任何帮助都非常感谢。

Answer 1

您的.col-3标签设置为display: inline-block;。

具有此类显示规则的兄弟姐妹将始终在彼此之间生成空格。

有多种方法可以解决此问题，您可以在float: left;上尝试.tabs .col-3。

查看CSS-TRICKS中的这篇着名文章，了解抵消内联块空白的多种方法：

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

如果没有边框，差距仍然存在，你只是没有看到它，因为一切都是相同的灰色。

空间存在的原因是因为元素是内联的并且对空白区域敏感。您可以向左浮动它们或删除空格：

＆＃13;

＆＃13;

.col-3 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 26.1%;
}
.tabs .col-3 {
  border-left: 2px solid #ffffff;
  cursor: pointer;
}
.col-3.active {
  background: #505050;
}
.container {
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  position: relative;
}
.full-width {
  background: #dfdedb none repeat scroll 0 0;
  width: 100%;
}
.main-container {
  margin: 0 auto;
  max-width: 1200px;
}

＆＃13;

<div class="full-width container tabs">
  <div class="main-container active">
    <div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
      <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div><!--
    --><div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div><!--
    --><div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

飘来：

＆＃13;

＆＃13;

.col-3 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 26.1%;
  float:left;
}
.tabs .col-3 {
  border-left: 2px solid #ffffff;
  cursor: pointer;
}
.col-3.active {
  background: #505050;
}
.container {
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  position: relative;
}
.full-width {
  background: #dfdedb none repeat scroll 0 0;
  width: 100%;
}
.main-container {
  margin: 0 auto;
  max-width: 1200px;
}

＆＃13;

<div class="full-width container tabs">
  <div class="main-container active">
    <div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
      <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
    <div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
    <div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

div之间删除了空格：

＆＃13;

＆＃13;

.col-3 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 26.1%;
}
.tabs .col-3 {
  border-left: 2px solid #ffffff;
  cursor: pointer;
}
.col-3.active {
  background: #505050;
}
.container {
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  position: relative;
}
.full-width {
  background: #dfdedb none repeat scroll 0 0;
  width: 100%;
}
.main-container {
  margin: 0 auto;
  max-width: 1200px;
}

＆＃13;

<div class="full-width container tabs">
  <div class="main-container active">
    <div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
      <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div><div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div><div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题是display:inline-block;。它造成了一些额外的空间which can be removed。或者，您可以使用float:left;代替display:inline-block;。如果您使用bootstrap，则不需要将display:inline-block分配给.col-3。

＆＃13;

＆＃13;

.col-3 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 26.1%;
}
.tabs .col-3 {
  border-left: 2px solid #ffffff;
  cursor: pointer;
}
.col-3.active {
  background: #505050;
}
.container {
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  position: relative;
}
.full-width {
  background: #dfdedb none repeat scroll 0 0;
  width: 100%;
}
.main-container {
  margin: 0 auto;
  max-width: 1200px;
}

＆＃13;

<div class="full-width container tabs">
  <div class="main-container active">
    <div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
      <h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div><!--
    --><div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div><!--
    --><div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
      <h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用float:left与.col-3 这是DEMO