为什么css中用scale缩放之后，虽然内容缩小了，但是占用的空间却没有变化

Question

因为被要求在网页中显示12px以下的字体，但是

-webkit-text-size-adjust:none;

在现在的chrome版本里面没有任何效果，所以我正在采用transform:scale的方法来实现缩小字体的效果。
但是在这个过程中我发现,被缩小后的内容索然整体被缩小了，但是占用的空间却没有任何变化。
现在是这样的，没缩放之前：

这里黄线是我将要缩放的内容
我缩放之后，就变成了这个样子：

可以看到，内容确实缩小了，但是他占用的位置却没有变化。
我没有调整任何边距，只是设置了内容居中。
通过检查发现，缩小后的内容实际渲染的大小已经发生了变化：

但是不知道为什么黄色的内容仍然占用着原来没有缩放之前占用的地方。如果占用的位置缩小了，应该会影响到右边蓝色的部分，蓝色的部分会左移，但是蓝色的部分并没有变化
下面是渲染黄色部分的scss：

.footer-info {
    padding-top: 0.3%;
    padding-left: 0%;
    position: relative;
    left: 0;
    color: white;
    float: left;
    display: inline;
    line-height: 60%;
    transform:scale(0.83,0.83);
  -webkit-transform:scale(0.83,0.83);
  -moz-transform:scale(0.83,0.83);
  -o-transform:scale(0.83,0.83);
  font-size: 12px;
 .text {
 text-align: center;
 position: relative;

}
}

还有渲染蓝色部分的scss：

.footer-sns {
    position: relative;
    display: inline;
    margin-bottom: 1%;
    color: white;
    width: auto;
    padding: 0;

  transform:scale(0.75,0.75);
  -webkit-transform:scale(0.75,0.75);
  -moz-transform:scale(0.75,0.75);
  -o-transform:scale(0.75,0.75);
  font-size: 12px;
}

非常感谢！

Answer 1

transform 的所有属性都不改变页面元素的布局。

Answer 2

如果想缩放盒模型可以试试zoom:0.5；

Answer 3

Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. from W3.org《The Transform Rendering Model》 Standard

Answer 4

scale只能引起重绘，而没有引起重排，所以页面外元素布局是不会改变，自身的样式会重新绘制

Answer 5

margin负边距

Answer 6

用zoom可以实现你的需求

Answer 7

本来就不会改变原来的文档流的，比如在图片hover样式上添加scale(1.5)，图片会变大，但不会影响布局，所以应该是在 不影响原文档流的情况下，在Z轴上提升了，就和relative定位一样。

Answer 8

不改变布局，如果改变布局的话，想想这些css3属性那就得很谨慎的用了，布局变的话，挺可怕的