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