This is actually about changing the current approach of defining the height of elements based on: text line-height + vertical padding +border. A decision that should be revisited. See Codepen with new approach (getting rid of vertical paddings and defining the height of components separately).
- Elements should always keep their given system heights (32px (2em), 40px (3em))
- Paddings should have system dimensions
Note:
Working with borders (e.g. in buttons) means always having to deal with an extra 1px, which can be alleviated by:
- having to apply weird 11px, 15px paddings to create the desired space; OR
- applying the right padding value but creating weird spacing like 13px (1px+12px padding)
Both solutions are suboptimal. This could be solved by using insets instead of borders: we could keep using system-compliant paddings and end up with the right spacing and sizing as a result.
Deciding factors:
- Figuring out if insets can take all the properties that can be assigned to borders
- Browser compatibility