Hey everyone, I have a question that I've been struggling to find an answer to. Imagine you have something like this:
<div className='container'>
<div className='wrapper' style={{
width: 40,
height: 40,
backgroundColor: 'red'
}}>
<div
className='item'
style={{
width: 18,
height: 18,
backgroundColor: 'black',
}}
/>
</div>
</div>
Essentially, there's a square with another square inside it in a top-level container.
If I add padding to the container, the size and position of the item change:
https://i.sstatic.net/aMmAQ.gif
In the GIF example(if it's would be positioned to center then the position would change too..., as the Chrome's inspector says it's remains at 18px) As shown, the item's size changes when padding on the container is adjusted.
P.S.: If the size of the item is an even percentage (or px) such as 10%, 20%, 30% ... 90%, then the size and position will remain consistent. The same applies if using PX values such as
10% ... 90%.. eg.: 4px, 8px, 12px...