Margin, Border, Padding - Same(ish) code with different outcome. Please take a look

Question

I have two pretty similar code snippets using CSS tricks as my lesson (http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/). I'm using Bootstrap with ruby on rails.

1st:

<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>

and 2nd:

<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 for both:

.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); 
}

These display differently and the 1st allows nth child selection of the in the .slide-up-caption class, whereas the 2nd does not (I know I could use ID). When I add Margin to the left and right of .slide-up-captions a {}, it causes the 2nd to wrap to a new line, which is not the effect I am going for.

I have used the Developer Tools to inspect and both are very similar.

1st Row: 970x85 with -15 left and right margin Col-m-3: 212.5x85 with 15 left and right padding a: 210.5x63 with 1px border and 20 bottom margin

2nd Row: 970x85 with -15 left and right margin a col-m-3: 210.5x63 with 15 left and right padding and 1px border and 20 bottom margin

GOAL: I would like to have the spacing of 1st with the nth child ability of the 2nd. Perhaps there is something going on with the gutter of bootstrap and how it does math? Any help in resolving is much appreciated. I've already searched and trial/errored for hours.

Answer 1

Alright, the best I could come up with to make there be whitespace between the equal columns was to add margin to the inner component, in this case the and the within the

You can also play with the nth child selector to make the 1st and only have right margin, and then the last nth child to make the and only have left margin. This makes the boxes take up the full row.

Hope this works for other people too.

.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)
}