Okay… I was still having problems understanding this because it is not very intuitive. So basically what I have come to understand is that the width property should include the padding.
This seem very strange and confusing based on the following:
If you set a background color, the color only covers the USABLE width/height and not the padding area
any border you set is only around the USABLE width/height as well.
This makes the padding look like a MARGIN in some ways but like padding in others. So… taking a Grid for example, if I want to make the grid’s background different from the container, but I want to make sure the cells have padding between them and the edge of the color, the only way to do that is to place the grid in a rectangle and set the background on that, and then put the padding on the grid inside of it.
As it stands, the only way to use padding is to set your padding values and then set the width to 100% or the full width of the container, i.e. desired usable width + padding.
It has taken me several weeks of headaches to figure this out so I think it would be really great to make this much more intuitive or at least explain it better in the docs (more than the change that was just made). The GUI system is the entire reason I chose babylon over ThreeJS and I think it is really cool, but so far I am having a lot of challenges learning to use it.