Box model seems to differ from the manual

I am using Unity 2020.1.0b4 with UI Builder 0.10.2.

Code (csharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
2.     <ui:VisualElement style="flex-grow: 1;&#10;flex-direction: row;&#10;">
3.         <Style src="NewUI.uss" />
4.         <ui:VisualElement style="flex-grow: 1;&#10;" />
5.         <ui:VisualElement style="flex-grow: 1;&#10;margin-left: 20px;&#10;margin-right: 20px;&#10;margin-top: 20px;&#10;margin-bottom: 20px;&#10;padding-left: 20px;&#10;padding-right: 20px;&#10;padding-top: 20px;&#10;padding-bottom: 20px;&#10;" />
6.     </ui:VisualElement>
7. </ui:UXML>

According to your manual, "A" should be the same length as "B" but it is not. "A" is equal to the width of the blue rectangle, and i think that's a bad idea. And mozilla does so too:

Note: It is often useful to set box-sizing to border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desireable.

Btw, yoga does it also the "correct" way (click on the 2nd box).

Am i missing something? I really hope you did not change your mind. It's really a hassle and i think it should be the exception from the rule.

 

Thanks for the prompt answer. Very much appreciated. Let me clarify, from the perspective of a layout creating user, why i - and i'm sure the vast majority of web-developers would agree - think it's bad:

The problem is the entanglement of concerns. When you add your padding and border to the width and start to fine-tune the layout, the changes propagate down the tree. That means, if you want the underlying structure to stay the same - and you probably would, that's why you did it the way you did - you have to readjust it. But then maybe the child looks off again and you add another few pixels... and then again to the parent... and to the child... back and forth... until you say "well that's good enough, i've got other things to do". If you go for the border-box approach instead and subtract padding and border from the width, you can play with the values independently from the parent and find the result that makes your brain go aaaahhhh! so much quicker und without that frustration of wasted time. Finally, if you really want that effect of adding something to the width, you simply use a margin.

For me, in most situations, content-box is like a cheap screwdriver: You get the job done somehow, but the joy over your work is severely reduced by the blisters on your hand

Have a great day!

 

It helps a lot! Cheers!

 

Actually it more than helps. It removes a giant bummer! I am very happy now with the new UI. Have a good one!

 

Hi team! is this bug fixed? I'm missing the box-sizing property so I guess it should be the default behavior but still the boxes sizes are being affected by the padding (which box-sizing fixes in html)

cheers!

 

Thanks Damian! I just needed to know if it was a bug or no, in order to do my own implementation of box-size or just wait for it to be fixed.

thanks again!
cheers