Table rows may contain single or multiple lines of text between row borders. This could be due to:
Wrapping
In the simplest case, the text is sandwiched between borders, and needs to be centered between them using symmetrical top and bottom padding:
As visible in the screenshot, in this case the rows (from border to border) align to the baseline grid, but the values within do not.
When text doesn’t fit, this could lead to wrapping. Again, the text is symmetrically padded (top/bottom):
Double row
A double row consists of paired values in one or more cells. Where possible, paired values should be related. If the kind of data that features on the second row is clear, the corresponding column header may omit one (or both) of the labels.
Since the rows no longer contain a single string of text between borders, the need for vertically symmetrical spacing doesn’t apply. Since all text elements in vanilla carry their own spacing, it is best to wrap the values in suitable markup tags and allow them to dictate the spacing within the double row. Use the u-no-margin–bottom utility to reduce the margin bottom to the minimum required to maintain the text on the baseline grid, as in the screenshot above.