Question about box model

[ko_reset_bai]

Hello everyone, I am a beginner and I am learning about CSS Box Model.

As far as I have learned, the size of an element using border-box includes the padding, border, and content, which will automatically size to the size of that element. For example, in the CSS code of Davie’s Burgers practice, the .button element has the following CSS code:

.button {
border-radius: 4px;
color: #05A8AA;
display: block;
font-weight: 700;
width: 200px;
padding: 20px;
margin: 40px auto;
border: 1px solid blue;
}

According to my understanding of border-box, the size of all the elements (including padding, border, and content) should be 200px.

However, when checking, it has increased to 242px, similar to content-box.

So what is the difference between them? I hope someone can explain it clearly to me. Thank you very much.

[melodyide]

Hi. You don’t have the “box-sizing: border-box” in your code. Could that be it?

[ko_reset_bai]

Hi! thankyou for your helping
In the setting of “*”, the system has already set the box-sizing to border-box.

[melodyide]

Does it change if you actually put the code in there? I’m also a beginner so I’m trying to guess but sometimes it works for me to specify something that was in a universal rule in the specific part of the code.

[ko_reset_bai]

i found the issue! make change in universal rule to padding: 0 and margin: 0 to avoid padding and margin of the browser!