Why does the addition padding the visible width of the element even if the window is sized to a border?
So, I was coding with Semantic-ui and I have two radio buttons (checkboxes) next to each other in a flexbox container. When the window is reduced in size, they are wrapped so that one is on top of the other.
To expand them a bit, I added both a right and bottom padding of about 5px. However, I noticed strange behavior. Padding can cause the drawers to move horizontally, but when positioned vertically, there should be no space between them, although each drawer has a bottom spacer.
Further research showed that the property of the box-sizing
flags was set to border-box
. After reading, I found that the window model border-box
calculates the width and height to include padding and border.
The flags are 1.5 times high.
My question is this. As I understand it, padding should not resize the element when using border-box. However, this only seems to be true if certain sizes are given, as shown in the linked jsfiddle. The height is set, so the bottom padding is not added additionally. But there is no width, and the right padding affects the visible width of the div.
Why is this so? Of course, padding shouldn't affect the size of the element (except for something funny, larger than the element itself), regardless of whether I define a certain width or leave it to calculate?
JSFiddle: http://jsfiddle.net/Astridax/8cd48emn/
Try and switch shims with dev tools to see what I mean.
source to share
As I understand it, padding should not resize the element when using a border margin.
Here you are confused. Here's what the spec has to say on the matter: http://www.w3.org/TR/css3-ui/#box-sizing0
border window
The specified width and height (and the corresponding min / max properties) on this element determine the element's border margin. That is, any padding or border specified on an element is laid out and drawn within that specified width and height. Content width and height are calculated by subtracting the border width and padding of the corresponding sides from the specified property width and height. Since the width and height of the content cannot be negative ([CSS21], section 10.2), this calculation is padded with 0.
The actual effect of setting box-sizing
is border-box
that the specified widths will contain a border and padding. The spectrum says nothing about the unspecified widths, which are therefore treated as normal — as wide as necessary to include both content and padding and border.
Edit:
What you mean has to happen, it is actually impossible to do for the following reason. Imagine that you have content in div
so that the width of the auto
content alone will be exactly 500px. Then add 20px padding around.
#myDiv {
padding: 20px;
width: auto;
}
No problem - you have a 540px width div
with the content-box
default window size .
Ok, so cancel box-sizing
on border-box
.
#myDiv {
box-sizing: border-box;
padding: 20px;
width: auto;
}
What you suggest should happen is that the addition should now be ignored. So we have div
with 500px content size, we will now include padding within 500px instead of expanding the width div
. But wait - now the content area has shrunk to 460 pixels to allow padding, and the total window size is 500 pixels. But wait, we don't have to make an account when calculating the width, so is it better to make the div 460px correct?
Do you see the problem? You can go on and on.
source to share