[問題] margin負值的問題消失

看板Web_Design作者時間8年前 (2017/08/12 20:48), 8年前編輯推噓2(2推 0噓 12→)
留言14則, 3人參與, 最新討論串1/1
我嘗試做到讓unordered list可以跟下方的div完全重合： 目前有做出效果： https://1drv.ms/i/s!Av6NUY4H7zPalXr9Tb2Y7ZZHovHp 我在css的部分添加 ul{ margin-bottom:-10px; } 就可以做到這樣的效果 但是如果我把上面的css改成: ul{ margin:0; } 就變成： https://1drv.ms/u/s!Av6NUY4H7zPalXuvAbxYR8AXNOgy 想請問為什麼我已經把ul 甚至是ul下方的div的padding margin都設成0 ul跟div之間就是會有ㄧ條細線在那 而為什麼我設定ul的margin-bottom為負數 ul會整個下移 而非下方的div上移呢 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.164.169.189 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1502542096.A.86B.html
推
08/12 23:45, , 1F
08/12 23:45, 1F
→
08/12 23:46, , 2F
08/12 23:46, 2F
→
08/12 23:46, , 3F
我隨便試試 並沒看到你說的那條細線
08/12 23:46, 3F
→
08/12 23:48, , 4F
而margin-bottom為負數時 div會上移 非你說的ul下移
08/12 23:48, 4F
→
08/13 00:45, , 5F
可以把CODE貼上來看看
08/13 00:45, 5F
CODE: https://1drv.ms/u/s!Av6NUY4H7zPalXw3M-q_PDG2E1zi ※ 編輯: lueichun (1.164.173.138), 08/13/2017 11:00:57
→
08/13 12:55, , 6F
你的ul設height:70px，但是你裡面的li只有69px
08/13 12:55, 6F
→
08/13 12:56, , 7F
所以下面會有1PX的空隙，把li a設line-height:70px
08/13 12:56, 7F
→
08/13 13:02, , 8F
然後display:block，padding:0 25px
08/13 13:02, 8F
→
08/13 13:06, , 9F
再來會建議你的header要用<header>或是<div>包起來
08/13 13:06, 9F
→
08/13 13:12, , 10F
可以學著用chrome的開發者工具(F12)
08/13 13:12, 10F
呃 結果變成這樣 https://1drv.ms/i/s!Av6NUY4H7zPalX3G2H3cc3uXqGx3 ※ 編輯: lueichun (1.164.173.138), 08/13/2017 20:03:16
→
08/13 22:10, , 11F
ul的margin-bottom刪掉後改成margin:0
08/13 22:10, 11F
→
08/13 22:15, , 12F
或是margin-bottom:0; 也一樣
08/13 22:15, 12F
還是一樣會有細線 我想還是先不用再試了 我只要知道為什麼ul的margin-bottom設成負數 相較margin:0時 ul的位置會變低 而不是像google的說法 ul下方的元素往上移呢 ※ 編輯: lueichun (59.120.148.217), 08/14/2017 12:53:50
推
09/12 03:17, , 13F
ul 預設會有上下的 margin，你設定 "margin: 0" 的話，會
09/12 03:17, 13F
→
09/12 03:18, , 14F
把原本的 margin-top 也蓋掉，所以 ul 就往上跑了
09/12 03:18, 14F
‣ 更多 lueichun 的文章
文章代碼(AID): #1PZlaGXh (Web_Design)