I am trying to use padding inside a Rectangle that I put in a grid cell, but the padding is being applied to the outer width of the Rectangle improperly.
Here is PG demonstrating the issue: https://www.babylonjs-playground.com/#KX33X8#62
Same thing happens when I use pixels: https://www.babylonjs-playground.com/#KX33X8#63
looks correct to me, but i have not used that a lot. padding applies to the contents:
https://www.babylonjs-playground.com/#KX33X8#64
What you did was use the padding properties like margin… so I am really confused.
The docs say “Please note that paddings are inside the control.” which is exactly the opposite in this case.
Yes, I agree with you. I used it like margin, so let’s see what the experts have to say. I have been up for 20 hours, so should not even be here 
I’ll check soon
Well the doc is unclear actually…
When I said “Please note that paddings are inside the control.” I want to actually say that" the size of the control will still be widthxheight and then padding will offset the entire content"
Does it make sense?
our padding works like CSS margin when box-sizing is set to border-box
I can update the doc probably to say something like that. (Thoughts?)
So the padding makes a margin outside of the border? Is this true in all cases? I will have to do some experimenting.
If that is true, then just saying “The padding is the space around it (on the outside) between it and its parent or sibling controls.” would be clear.
Yes it is always the case (unless bug of course)
Will udpate the doc right now
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
AND
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.
I’m sure that your experience with GUI would be helpful to others. The docs are also open source and improving the documentation is always welcome by github pull requests, if you wanted. ie:
Making it more intuitive would be good, too. The framework is very committed to being backwards compatible and that brings challenges
Agree with @brianzinn, this is an OSS project and every hand is welcome to help. I would love to capture your feedback in the doc so other people do not have to lose weeks understanding that concept.
I also have to mention that everyone except something a bit different and we may need to find something in the middle most of the time
Look at the margin property of CSS, this is kind of a hell and depending on the box-content property the behavior can change as well
We may have named that property margin instead of padding but even though I do not remember why we decided to use padding (it was initially named margin)
Anyway, I would really appreciate your help improving the doc:
I will try to improve the docs for sure. Just gotta carve out a little time for it. Thank you all for your help!
Thank you for being part of the family