首页 > 代码库 > margin慎用百分号

margin慎用百分号

有个容器要上下左右留点空间,稍稍留点就行,于是选择了margin属性。 

随手写了:margin:5%

一跑起来, 整个界面是乱七八糟。 

 

仔细一查,margin的定义里写着:

<percentage>

<percentage> relative to the width of the containing block. Negative values are allowed.

 

还特意把width加粗了, 唯恐别人看不到。 

 

所以上下左右各留一部分的较好做法是:

.inner{  position:absolute;  top:50%;  left:50%;  translate:transform(-50%,-50%);}

  

解释:top和left计算50%的时候是用父容器的大小来计算。 

而translate的时候用子容器的大小来算。 

 

因为margin的百分号问题我特意去看了下padding的

padding也同理, 只看width,不看height。

 

至于border。。。border不支持百分号。

至少文档里是这么说的。

 

margin慎用百分号