当我使用百分比值作为宽度时，为什么div元素中有额外的空间

Question

在这个CodePen中，当"#spaper"的宽度是像素值时，为什么没有空间：

#spatula { width: 50px; }

但只要它是一个百分比值：

#spatula { width: 10%; }

右边有多余的空间吗？

Answer 1

全部取决于容器的大小。如果使用百分比进行操作，则将根据其父容器的大小进行计算。如果在revenche中以像素显示，则它们将相对于屏幕的像素显示。像素不会根据屏幕或其父容器的大小而变化。像素是一种固定且不可变的度量。