Parent is inline-block and child has % padding = strange behaviour-CodePudding

I've been doing CSS for a while now but couldn't figure out what's going here. Feeling really dumb :) Could you explain the behaviour?

.parent {
  display:inline-block;
}

.child {
    border: 2px solid red;
    padding: 20px; /* this works as expected */
    padding: 20%;
    box-sizing: border-box; /* makes no difference */
}

<div >
  <div >CSSisAwesome</div>
</div>

CodePudding user response：

You are facing a cyclic calculation due to the use of percentage value. The parent is an inline-block element so its width is defined by its content and that same content is using a percentage value so the content need a reference for that percentage which is the width of the parent. You have a cycle.

In such case, the browser will first ignore the padding to define the parent width and then calculate the padding BUT we don't get to calculate the parent width again because will have an infinite loop.

Check this:

.parent {
  display: inline-block;
}

.child {
  border: 2px solid red;
  
}

<div >
  <div >CSSisAwesome</div>
</div>
<br>
<br>
<div >
  <div  style="padding: 20%;">CSSisAwesome</div>
</div>

Note how in both cases, the width of the parent is the same and that width is defined by the content. The padding is added later and create an overflow.

You can find mode detail in the Specification

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency.

Related questions:

Why does percentage padding break my flex item?

CSS Grid - unnecessary word break

How percentage truly works compared to other units in different situations

CodePudding user response：

As seen in this CSSTricks article, padding using percentage units is in relation to the parent container, not the content within the element. The 20% padding you're setting in your code snippet is in relation to the .parent div's dimensions, not in relation to the content within the .child div.

CodePudding user response：

If you are using % as a unit, Parent should have fixed width and height

CodePudding user response：

The display: inline-block Value Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline, display: inline-block and display: block

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}