Box border pushes content in 1px
Closed this issue · 1 comments
The left one is implementation, right is the design spec.
The total size is wrong (it should be 6px less), probably due to the fact that we're taking into account the border width as part of the total size of the component (among other small issues).
Also, the margin between the end of the media object and the progress indicator should probably be 5px smaller (or maybe smaller, depends on how we handle the border thing).
--
I'd also say that the 'MediaObject child' is probably wrong too for the same exact reason. 90px height doesn't sound like a round number compared to the 88px that should have if we weren't counting the borders as part of the total size.
If this helps: we're don't count in boxed content the width of the border as a parameter that affects the total size. So for instance, if we say a box of 64px height, that would include the border within that box, not an outer border.
quick point of clarification, Box is just the div with rounded corners. the screenshot above is from an example showing that child content can be positioned absolutely within it, the PreviewCard component hasn't actually been created yet.
so the existing bug is that Box's border shouldn't push its content in by 1px; it should allow the child elements to maintain vertical rhythm and left/right alignment with content above and below the Box. let's fix Box now, then we can make sure PreviewCard's layout is also correct when we build it.