CSS padding 與溢出問題

https://jsfiddle.net/ndrjjxku/5/
 
這邊想問個問題
div herader第二排的超連結(玩新聞到英國脫歐那)
padding下方設數值總是會超出div herader的邊框
(如padding:1% 1% 0% 1%; 如果把0設為1總是會溢出邊框)
https://jsfiddle.net/ndrjjxku/6/
就算div herader不被撐大 好像也不該溢出來
有辦法可以避免嗎?(不溢出來)
謝謝> <

html
css
發問時間:2016-08-16 07:08
阿川先生
54

此問題由我Email轉錄至此。得到回答後將轉貼給原發問者 – 阿川先生 07:08
新增推文
發問注意事項
  • 一次問一個問題。多個問題請分多次發問
  • 請盡量清楚描述您的問題
  • 請描述您做過哪些嘗試、試過哪些方法
  • 請盡可能地提供細節,幫回答者節省時間

3 個回答

0
我把#header max那個改成    height: 100px; 就可以了
你的原因我努力找找看 ><




回答時間:2016-08-16 09:35
ulunj
2

謝謝解答^ ^ – SimAll 22:27
新增推文

1
在#header 裡面多加一條 padding-bottom:1%; 

這樣就好了

塊元素會溢出,因為你是在父<div>後才設定子<a>,

所以a元素才會溢。

回答時間:2016-08-16 09:59
Hydra
36

原來如此! 我沒想到父子關係那邊! – SimAll 22:29
感謝你的解答^ ^ – SimAll 22:30
這應該不完全算是父子關係所產生的狀況喔。 – Kerwin 07:29
新增推文

2
a 標籤預設 display 為 inline ,不接受 width、height
margin-top、margin-bottom、padding-top、padding-bottom,也不會推開上面或下面的元素,就會有溢出的現像

解決方法,把 a 標籤 display 改為 inline-block,接著記得把width改為你要的寬度

那如果不想修改 display 的話,可以利用 overflow : hidden 設定於容器 .header,就可以將溢出的部份隱藏掉。
或是像 Hydra 說的把 header padding-bottom 位置給擠出來。

但建議,採用方法一才能根治。

參考文章: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

回答時間:2016-08-17 07:29
Kerwin
24

謝謝詳解,我的方法治標不治本,實作方面經驗太少了,自己要在多精進!! – Hydra 11:42
我也是看到有人提出問題,再仔細去找資料深入學習的喔。 一起學習一起精進囉。 – Kerwin 11:48
原來如此..謝謝你的解答 ヽ(´∀`)ノ – SimAll 17:47
新增推文