PTT
Submit
Submit
选择语言
正體中文
简体中文
PTT
Web_Design
[问题] 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 才会这样我也是网页新人 如果搞错方向请其他前辈鞭小力点(抖
继续阅读
[问题] 能让网页不随手机横放而调整吗?
virgin7
[问题] <img> 引用外部 url 的安全性问题
Neisseria
[问题] 必填字段
MAGICXX
[售书] PHP SMARTY样版引擎
herbacin
[问题] 制作网页导览列时排版的问题
lueichun
[问题] 要如何使手机在输入栏不要聚焦?
defsrisars
[请益] 网页在firefox上会卡卡的?
s106667
[问题] Firebase的require()有问题
coexistence
[问题] 如何pass 变量给 php /perl
gecer
[问题] 请问程式一行行进行的测试软体
higgco
Links
booklink
Contact Us: admin [ a t ] ucptt.com