[问题] 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