Margin, Border, Padding - 相同(ish) 代码具有不同的结果。请看一下

Question

我有两个非常相似的代码 sn-ps 使用 CSS 技巧作为我的课程 (http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/)。我正在使用带有 ruby​​ on rails 的 Bootstrap。

第一个：

<div class="row center">
  <div class="col-md-3 slide-up-captions">
    <a href="#">
      <h5>Absolute Me</h5>
      <div>Some other text...</div>
    </a>
  </div>
  <div class="col-md-3 slide-up-captions">
     <a href="#">
      <h5>Absolute Me</h5>
      <div>GSome other text...</div>
    </a>
  </div>
  <div class="col-md-3 slide-up-captions">
   <a href="#">
      <h5>Absolute Me</h5>
      <div>Some other text...</div>
    </a>
  </div>
  <div class="col-md-3 slide-up-captions">
   <a href="#">
      <h5>Absolute Me</h5>
      <div>Something else...</div>
    </a>
  </div>
</div>

第二个：

<div class="slide-up-captions row center">
      <a href="#" class="col-md-3">
        <h5>absolute me</h5>
        <div>Some other text...</div>
      </a>
      <a href="#" class="col-md-3">
        <h5>absolute me</h5>
        <div>Some other text...</div>
      </a>
      <a href="#" class="col-md-3">
        <h5>absolute me</h5>
        <div>Some other text...</div>
      </a>
      <a href="#" class="col-md-3">
        <h5>absolute me</h5>
        <div>Some other text...</div>
      </a>
</div>

两者的 CSS：

.slide-up-captions a {
  display: block;
  background: $lightBlue;
  border: 1px solid $grayMediumLight;
  height: 65px;
  margin: 0 0 20px 0;
  overflow: hidden;
}

.slide-up-captions h5 {
  height: 65px;
  text-align: center;
  line-height: 65px;

  -webkit-transition: margin-top 0.2s linear;
}

.slide-up-captions a:hover h5 {
  margin-top: -65px;
}

.slide-up-captions div {
  height: 45px;
  padding: 10px;
  opacity: 0;

  -webkit-transition: all 0.3s linear;
  -webkit-transform: rotate(6deg);
}

.slide-up-captions a:hover div {
  opacity: 1;
  -webkit-transform: rotate(0); 
}

这些显示方式不同，第一个允许在 .slide-up-caption 类中选择第 n 个子项，而第二个不允许（我知道我可以使用 ID）。 当我在 .slide-up-captions a {} 的左侧和右侧添加 Margin 时，它会导致 2nd 换行到新行，这不是我想要的效果。

我使用开发者工具进行了检查，两者非常相似。

第一 行：970x85，左右边距 -15 Col-m-3：212.5x85，左右填充 15 a: 210.5x63，1px 边框和 20 下边距

第二 行：970x85，左右边距 -15 col-m-3: 210.5x63，左右边距为 15，边框为 1px，下边距为 20

目标：我想要第 1 个的间距和第 2 个的第 n 个孩子的能力。也许引导程序的排水沟发生了一些事情，它是如何进行数学运算的？非常感谢任何解决问题的帮助。我已经搜索并试错了几个小时。

Answer 1

好吧，我能想出的最好的办法是让相等的列之间有空格是在内部组件中添加边距，在这种情况下，

您也可以使用第 n 个子选择器来制作第一个且只有右边距，然后使用最后一个第 n 个子选择器制作并且只有左边距。这使得这些框占据了整行。

希望这也适用于其他人。

.slide-up-captions a {
  display: block;
  // background: $lightBlue;
  // border: 1px solid $grayMediumLight;
  height: 65px;
  padding: 0px; //**** added this
  margin: 0 0px 20px 0px;
  overflow: hidden;
}

.slide-up-captions h5 {
  height: 65px;
  text-align: center;
  line-height: 65px;
  margin: 0 10px 0 0px;
  background: $lightBlue;

  -webkit-transition: margin-top 0.2s linear;
}

.slide-up-captions a:hover h5 {
  margin-top: -65px;
}

.slide-up-captions div {
  height: 45px;
  padding: 10px;
  margin: 0 10px;
  opacity: 0;

  -webkit-transition: all 0.3s linear;
  -webkit-transform: rotate(6deg);
}

.slide-up-captions a:hover div {
  opacity: 1;
  -webkit-transform: rotate(0)
}