[問題] 巢狀DIV上下間距的問題該如何解決呢?

看板Web_Design作者 (阿湯)時間11年前 (2014/09/02 23:14), 編輯推噓5(506)
留言11則, 7人參與, 最新討論串1/1
請問以下內容,DIV TOP和DIV LEFT,DIV RIGHT,之間有一個空白間距 該如何解決呢? <!DOCTYPE html> <html> <head> <style type="text/css"> .box2 {display:inline-block;} div * {margin: 0;} </style> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body style="padding:0;;margin:0;"> <div id="wrapper" style="width:600px;margin: 0 auto;height: 900px; border-width: 1px; border-color: #8f8f8f; border-style: solid;"> <div class="box2" id="top" style="width: 600px;height: 100px;background : red;"></div> <div class="box2" id="left" style="width:100px;height: 700px; background: green;"></div> <div class="box2" id="right" style="width:500px;height: 700px; background:gold;"></div> <div id="footer" style="width: 600px;height: 100px;background:red;"> footer</div> </div> </body> </html> 拜託各位高手了.... -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.232.166.94 ※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1409670883.A.22E.html

09/03 00:04, , 1F
在top跟left的style裡加上float:left
09/03 00:04, 1F

09/03 00:52, , 2F
http://ppt.cc/NrZT 那是inline-block的特性
09/03 00:52, 2F

09/03 17:01, , 3F
inline-block的空白要用letter-spacing跟word-spacing
09/03 17:01, 3F

09/03 17:01, , 4F
來解
09/03 17:01, 4F

09/03 20:27, , 5F
抱歉 那個網頁我有點看不懂
09/03 20:27, 5F

09/03 20:31, , 6F
我在inline-block後面加上letter-spacing:-5px;
09/03 20:31, 6F

09/03 20:32, , 7F
word-spacing:-5px;結果沒辦法解決ㄝ
09/03 20:32, 7F

09/03 21:59, , 8F
簡單的說,把 </div> ... <div> 之間的空白、換行刪掉
09/03 21:59, 8F

09/04 03:51, , 9F
樓上是最簡單的方法,如果你不是排版控的話XD
09/04 03:51, 9F

09/04 16:01, , 10F
我弄出來了 我把上下的外距設為負值
09/04 16:01, 10F

09/05 11:26, , 11F
應該不用設定負值喔,設定 vertical-align: top 即可
09/05 11:26, 11F
文章代碼(AID): #1K1TxZ8k (Web_Design)