我在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 不知道是不是有矛盾的地方