Margins inside flexBox

[coding1000]

Hey everyone, would love a few pointers here for styling in RN.

I have a parent container that is flex: 5 for sizing. Then I have child containers inside, of height: '10%'. I also set the marginTop: '10%' for the child. But the marginTop is significantly smaller than the size of the child. Shouldn't they be the same height since they are both '10%' of the parent container? Why does this happen and what is the recommended way to margin inside a flexed parent container?

Many thanks!

 

[BigDady]

Please post the entire html/c ss code you're using. Why? Because I want to see other code like "Are you using
* {
box-sizing: border-box;
}
"?

 

[coding1000]

Please post the entire html/c ss code you're using. Why? Because I want to see other code like "Are you using
* {
box-sizing: border-box;
}
"?

For child container: {height: '10%', marginTop: '10%'}
for parent container: {flex: 5, width: '100%}