Padding count in "regular" Box Model differs from Webflow – or am I wrong?

[prohaska (Boris Périsset)]

Well.
I feel kinda stupid. But in the Box Model the padding of a box also counts in the total dimension of an element. But not when i’m doing it in Webflow. (Which is easier to calculate - thanks by the way). But what is the reason and how/where it works?

My Codepen Test
My Webflow Project

My CSS of the Child Items

.box {
  display: block;
  width: 17%;
  margin: 2%;
  background:#9afaa3;
  color: #225489;
  padding: 2%;
}

.box-2 {
  display: block;
  width: 20%;
  margin: 2.5%;
  background:#9afaa3;
  color: #225489;
  padding: 4%;
}

[ToreSBentsen]

If creating a div block with a width of 20%, then adding padding 4%. Then the box will not be 24% in width. Padding pushes the elements inside the box.

This goes for Webflow as well.

[vincent (Vincent Bidaux)]

Also, values in % on padding top or bottom are relative to the computed width of the parent element (ie. containing block).

Webflow experiment

[prohaska (Boris Périsset)]

Thanks for your fast reply. I need to study your answer while having lunch.

[prohaska (Boris Périsset)]

I do understand the dependency of the padding value to its parent.

But still, why does it differ from my Codepen Test?
The values in my webflow project seem to work… The Webflow Project