首页 > 代码库 > margin慎用百分号
margin慎用百分号
有个容器要上下左右留点空间,稍稍留点就行,于是选择了margin属性。
随手写了:margin:5%
一跑起来, 整个界面是乱七八糟。
仔细一查,margin的定义里写着:
<percentage>
A <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慎用百分号
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。