您的位置：首页 > 运维架构

关于margin-top 的神奇现象

2015-05-07 21:14 316 查看

一次在QQ群里，看到群友说他面试遇到一个问题关于问<div style="width:20px;height:20px;margin-top:20px;background-color:red"> </div>这个margin-top是多少像素

大家第一反应肯定是与父类的高度有关，根据w3shool的资料http://www.jb51.net/w3school/css/pr_margin-top.htm

值	描述
auto	浏览器设置的上外边距。
length	定义固定的上外边距。默认值是 0。
%	定义基于父对象总高度的百分比上外边距。
inherit	规定应该从父元素继承上外边距。

确实如我们所言，但是根据实际测试得

<html>

<body>

<div style="width:100px;height:200px;background-color:green">

<div style="width:20px;height:20px;margin-top:20px;background-color:red"> </div>

</div>

</body>

</html>

结果确是20px，后根据查w3 的资料显示，只和宽度有关

后来实际测试确实，所有的margin的%都只和宽带有关

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航