Currently, I am working on a scaling transform where the origin is centered horizontally. However, I have noticed that when I scale the element, the vertical padding appears to be scaled, but the horizontal padding remains unchanged. How can I ensure that the horizontal padding scales proportionally as well?
.inner {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: #f99;
transform: scale(1.5);
transform-origin: top center;
box-sizing: border-box;
padding: 20px;
}
.inner2 {
background-color: #99f;
height: 260px;
}
.outer {
background-color: #ccc;
}<div class="outer">
<div class="inner">
<div class="inner2">
</div>
</div>
</div>Another query I have is related to Chrome dev tools. I have noticed that the Chrome dev tools do not update the computed properties after the scaling transform, such as the width remaining unchanged in the inspector.
Additionally, I am facing an issue where the inner element extends beyond the outer element after the scaling transform. How can I adjust this so that the outer element fully contains the inner element?
UPDATE: By eliminating a border on the inner element, per the suggestion from @Stickers, I can clearly see that the horizontal padding is not scaling, unlike the vertical padding.
UPDATE: For a demonstration of the scaling behavior, you can check out this codepen with a larger padding showcasing the difference in scaling between vertical and horizontal padding.