Compass Vertical Rhythm

Issue

I have a <tr> with 4 <th>'s inside and without borders the <tr> and <th>'s are all 22 pixels tall which equals my $base-line-height - Perfect.

However, when I add +horizontal-borders(1px, 0) the <th>'s show up as 23 pixels tall and knock my vertical rhythm out.

Why is this and how can I fix it?

Solution

The vertical-rhythms approach uses padding in combination with borders to keep the rhythm consistent. If you set the second argument (lines) to zero, there is no room for vertical-rhythms to work. The rhythm lines argument has to be greater than the border width.

Answered By - Miriam Suzanne