轉個彎發問
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
新增推文

我要回答這個問題！