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