SIZING ELEMENTS - Percentages: Padding & Margin

In this lesson (, it was stated that

**Note: Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin. **

What if we set the width to 100% and there’s a padding, border and margin, and we set box-sizing: border-box, will the child element still oveflow the parent container?

Hey @byte6953803474

Only if you add margin, as the the name of the box-sizing value implies, border-box includes padding and border within the value you specified in your width, but as you can see below, margin is outside of the border-box.


So it will still overflow because margin is outside of the border-box?

1 Like

Yes, it’s exactly that :slight_smile: .

1 Like

Thank you so much for the explanation, God bless you

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.