[问题] CSS margin-top的问题

楼主: lueichun (no anonymous)   2016-12-14 22:21:37
CSS的margin-top属性
如果是用在block element的话
则margin-top的设定会被上一层的block element抢走
所以如果现在有两层div
并在内层的div设定margin-top的话 则这个margin-top会被外层的div取来用
于是网页的呈显就不如预期
这在stackoverflow上都有人在讨论:
https://goo.gl/6FXZf7
上面的说法是因为margin collapsing的缘故
我看了好几个网页的说明 都是这样说
但我不懂的是 margin collapsing指的是
margin-bottom跟margin-top相遇时 margin-top会被忽略
这跟margin-top在没有border的限制下 会被外层的block element抢走
到底有什么关系
是因为什么原因 才会有“外层元素可以抢内层元素属性”这种规范
这样设计规范的好处是什么
而这个问题也可以改成:
为什么block element的margin-top会被抢走 但inline-block元素却不会
我google到的说法 都是只有讲替代的语法
例如将block element改成是inline-block element
或是将margin-top改成padding-top
却没有说明这种规范的原因 好处
但我觉得知道这个问题的原因 才能知道这个规范在实际开发时可以用在什么地方
不然只是将block element改成是inline-block element
或是将margin-top改成padding-top
也只是在背语法
作者: EPGo   2016-12-15 15:49:00
想了解可以google "CSS BFC" 蛮多中文资料的

Links booklink

Contact Us: admin [ a t ] ucptt.com