Compass Vertical Rhythm - HR tags breaks vertical grid

I'm trying to understand vertical rhythm and read the whole day about, tried several things but my layout keeps breaking because I fail to apply compass padding trailer correctly as you can see in the screen shot:

!screenshot

The line with the yellow background is my hr tag.
The ones with the orange background are articles.

Here's my code:

HTML:

<article>…</article>
<hr/>
<article>…</article>

CSS:

hr {
  background: rgba(yellow, 0.3);
  @include trailing-border;
  //border: 0;
  //height: 0;
  //border-top: 1px solid rgba(0, 0, 0, 0.1);
  //border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

For the sake of keeping it simple I commented my HR styling out.

Here's another example where the gap is more visible:

!screenshot2

hr {
  background: rgba(yellow, 0.3);
  @include trailer(1.5);
  @include trailing-border;
  @include leader(1.5);
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

I don't know what I'm doing wrong here. Please help me out to understand this property.

Links:

Solution

You have several problems here.

1) Browsers apply default top/bottom margins that you need to either override or reset. A full <hr/> reset looks something like this:

hr {
  border: 0;
  height: 0;
  margin: 0;
}

2) With that reset in place, the trailing-border mixin will work (I've left your yellow in place so you can see the padding it adds as well as the border):

hr {
  @include trailing-border; // adds padding-bottom and border-bottom properties
  background: rgba(yellow, .3); // shows in the padding
}

You can also add your leader and trailer there. That will work to create a single line that fits the rhythm and has space around it, but I don't think this is what you are trying to do.

3) It looks like you want a two-tone border by setting both top and bottom borders at different colors. That can work, but you don't want to use trailing-border. In fact, there is no mixin from vertical-rhythms that will help you with this - you'll have to do it by hand. By adding two 1px borders, you know that you are breaking the rhythm by 2px. So simply get those px back, and you are good to go:

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: -2px 0 0 0;
}

You can subtract those 2px from either the top or bottom, and you can add either leader or trailer to the other side (but not both). You'll have to get your extra space from margin on the articles instead.