The box should have borders and/or padding on all sides, or none at all. Otherwise it's not a box, but something more specific.
This is an example of the default box layout. It uses the class
It has an even border and padding on all sides.
Because its parent -
main - uses Flexbox in the column direction, the box stretches full width.
To limit the width of a box to just its content, use
For a box without padding, use the modifier class
For a box without a border, use the modifier class
High contrast themes tend to eliminate background-color. If there is no border set on the box, we need to apply a transparent outline to maintain the box shape. The negative outline-offset moves the outline inside the perimeter so it behaves like a border and doesn't add to the overall size.
This box has neither border nor padding.