[問題] CSS padding與margin的問題

作者: lueichun (no anonymous)   2016-11-12 16:28:30
我在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 不知道是不是有矛盾的地方
作者: eight0 (欸XD)   2016-11-12 16:35:00
display: inline 和 block 的差別
作者: ji394snoopy (asdf60513)   2016-11-12 20:20:00
只有我覺得這個文寫的好亂嗎… 覺得是display跟boxing的差別
作者: chatnoir (對不起)   2016-11-13 00:20:00
boxing的問題吧~
作者: yulymoon (Yuly)   2016-11-15 23:28:00
你貼的範例不能看欸是說為什麼你要在H裡面包span啊?
作者: SimonAllen (西蒙˙艾倫)   2016-11-16 19:48:00
範例網站不能看 而且程式碼好亂..我猜你也是做轉個彎教室作業 我幾個月前也是試試這個網站 http://zh-tw.learnlayout.com/對了忘記回答你的<a>元素問題 <a>元素預設是display:idisplay:inline 它無法接受width、height、margim還有padding,解決方法是display設置bolck或inline-block因為你有設置display: inline-block 才會這樣我也是網頁新人 如果搞錯方向請其他前輩鞭小力點(抖

Links booklink

Contact Us: admin [ a t ] ucptt.com