Research into child element’s real width if percentage is used

What’s the width of child in pixel?

<div class="parent">
    <div class="child">
         some text

.parent {
  width: 700px;

.child {
  width: 50%;
  background-color: green;

Of course it’s 350px

And the parent is like

Let parent has padding

padding: 40px;

The result is the same

Width of child is still 350px

Btw ,the parent is now

Parent has padding + Child has padding

Let child has padding:

padding: 15px;

The result is

Width of child is still 350px

Let parent has margin

 margin: 40px;

Width of child is still 350px

and the parent is

Parent has margin + Child has margin

Add margin to child:

padding: 15px;

Width of child is still 350px

Conclusion: A child’s real width (not including padding/margin) = parent’s real width (not including padding/margin) * percentage

What if I use flexbox layout and flex-basis?

I tested it. Exactly the same.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.