本文深入探讨了CSS中margin-top属性在不同宽度条件下的表现，通过实例展示了其与元素宽度而非高度之间的关系，澄清了常见的误解。
一次在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的%都只和宽带有关
扫一扫
771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
