为什么缩放CSS转换功能不影响边距？

我有一个包含其他几个div和元素的div

现在我想使用

transform:scale（n）

但是当我使用它时，一切看起来都很好，除了内部div的边距保持不变 但是 内部元素的宽度已更改

---

正如你所看到的，div的大小减少了一半。。。 但差距是一样的：/

例如，在父代码中有一个div。 此子div的页边距上限为100px

如果更改父对象的比例，则子对象的边距保持不变，但大小不同。您可以看到，此时子对象在更改比例时没有移动

.holder{
背景：粉红色；
变换：比例（0.5）；
}
#儿子{
边缘顶部：100px；
填充：20px；
背景：绿色；
}

唐卡

转换确实会影响视觉渲染，但对CSS布局没有影响，只会影响溢出

从标准

并在此演示：

console.log（'getComputedStyle:height:'+getComputedStyle（box.height））；
log（'getComputedStyle:width:'+getComputedStyle（box.width））
#框{
宽度：100px；
高度：100px；
背景：粉红色；
变换：比例（2,2）；
}

箱
您的第一个屏幕截图似乎显示了
transform orginin
的问题，默认情况下，transform orginin是
50%0
（元素的中心）。将其更改为左上

，元素将按左上角的比例缩放，因此边距将减小

---

关于您共享的代码，这与比例无关，但您正面临一个利润崩溃的问题。子对象的边距与其父对象的边距一起折叠，直到此子对象的边距与

body

margin一起折叠，才会发生相同的情况。换句话说，边距不再属于缩放元素

这是您的初始代码和页边距：

正文{
背景：线性梯度（至底部，#000 50%，透明0）0 0/100%100px；
}
.持有人{
动画：动漫3s无限线性；
变换原点：顶部；
}
#儿子{
边缘顶部：100px；
填充：20px；
背景：绿色；
}
@关键帧动画{
从{
变换：比例（1）；
}
到{
变换：比例（0.3）；
}
}

唐卡

tl；博士 变换是相对于默认设置为的。边框框以边框为边界。因此，缩放变换将缩放边框（边框、填充、内容框）内的所有内容

长话短说 我将从以下示例开始回答：

按钮{
填充：10px；
利润率：10px；
}
.缩放{
变换：尺度（2）；
}

按钮
按钮

对我来说似乎不一样。。。你能分享你的代码吗谢谢大家添加了一个例子更新了我的答案，希望现在清楚；）@巴特，也就是说，实际大小仍然与设置之前相同，我试图找到文档，但它们在视觉上发生了变化，这就是问题的目的。。。你的意思是什么都没有改变，但他说宽度在改变，而不是马里金，所以他说的是视觉，我猜我猜他认为变换改变了宽度，实际上没有，所有东西都停留在原来的位置，只是改变了视觉渲染，这意味着你认为像宽度一样变化，实际上没有，但是我们在讨论视觉宽度。。我们都知道首字母不会改变。。。但是，正如你在他的截图中看到的，视觉变化，以及视觉变化的问题，，，，你设置了变换：比例，然后对视觉变化感到惊讶。我不明白是否有什么让我感到惊讶。对不起，这是怎么回事？顺便说一句，解释得很好。。。但是如果你检查他的例子，你会发现边距属于一个子元素，而不是它本身的元素。。。所以问题是，为什么应该包含在转换中的内边界没有被考虑到，检查devtools并使用非常小的规模，你会发现maring也是considered@TemaniAfif：啊，我没有看到在父级上声明的转换规则。谢谢你的提高。然而，我相信我的答案仍然成立，因为“变换是累积的。也就是说，元素在其父元素的坐标系内建立其局部坐标系”，并且局部坐标系“其原点位于由

变换框

属性指定的参考框的左上角。”引用自。尝试一下，看看效果：）如果缩放两个元素的容器，内边距将减小。他在我的回答下面有两个主要问题，以了解更多细节；）如果您点击链接，您将看到

转换框

是一项实验性功能，在旧浏览器上无法更改。