While working with Semantic-ui, I encountered an issue with toggle boxes placed next to each other in a flexbox container. When the window size is reduced, the boxes wrap around so that one is positioned on top of the other.
To create some spacing between them, I added both right and bottom padding of approximately 5px. However, I noticed a peculiar behavior. The padding caused the boxes to separate horizontally but not vertically when stacked, despite having bottom padding on each box.
Upon further investigation, I discovered that the check boxes had their box-sizing property set to border-box. It turns out that the border-box box model calculates width and height to include padding and border.
The checkboxes were assigned a height of 1.5rem.
My question arises from this situation. My understanding was that padding shouldn't alter the size of an element when using border-box. However, this only seems to hold true if definite dimensions are defined as shown in the provided jsfiddle. Since the height is specified, the bottom padding isn't considered an additional dimension. Yet, the visible width of the divs changes when applying right padding even without a specific width set.
Why does this occur? Shouldn't padding have no impact on the element's size (unless set excessively large) regardless of whether a definite width is determined or left to be calculated?
JSFiddle: http://jsfiddle.net/Astridax/8cd48emn/
I encourage you to experiment with toggling paddings using dev tools to observe the phenomenon firsthand.