<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
}
.child {
box-sizing: border-box;
margin: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="app">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
The scenario involves a child div nested within a parent div with padding and margin attributes. One would expect the child div to be centered, similar to the provided image.
https://i.sstatic.net/z5cTx.png
However, when executing the code, the child div appears skewed towards the bottom right corner.
https://i.sstatic.net/kvxc6.png
To address this issue, I attempted using the box-sizing property set to border-box to account for the margin of 20px in the final dimensions but observed no changes. Thus, my queries are: 1) How can I center the child div with applied margin? 2) Why does the border-box attribute not affect the child div as expected?