我在jsfiddle内看到一个范例如下:
http://jsfiddle.net/NkXUW/50/
这个范例在div里面有a这个元素
我发现不管a的padding与margin怎么变动
div的大小都不会改变 不会因为a变大 div就跟着变大
这表示CSS box model内的content 如果content变大
外围的padding border margin是不会跟着撑大的
但是我自己在尝试写类似的CSS时
却发现子元素的padding margin变大 缩小时
似乎可以让父元素也跟着撑大 缩小
我的code:
https://jsfiddle.net/rcyang/htez6m9q/
在#rightNavigatorTitle的地方
有个 margin-bottom:-2px;
而#rightNavigatorTitle上一层的元素是#rightNavigator>h3
#rightNavigator>h3有border-bottom
用来当作网页右方“编辑推荐”下方的border-bottom
#rightNavigatorTitle的margin-bottom:-2px;
似乎可以让rightNavigator>h3的border-bottom
也就是“编辑推荐”下方的border-bottom上移2px
以做到将编辑推荐下方的border-bottom隐藏的效果
又margin-bottom:-2px;的下一行有
padding:20px 20px 20px 20px;
若加入这一行 就可将border-bottom向下推移20px
这里就是我不懂的地方
为何在这边的子元素 就可借由改变margin padding
来撑大或缩小父元素的大小呢
一开始的范例跟我写的code 不知道是不是有矛盾的地方