通常我們在製作的時候，會分別給四個p加上不同的css屬性，來實現中間間隔。但我們更希望的是不需要對html標籤做標識，直接能通過css實現，今天在論壇上小志提出了一個很不錯的解決方案。使用overflow:hidden屬性。或許很多人已經是這樣用了，我沒用過，覺得耳目一新。呵呵。其實道理很簡單，我們按照正常的設定li的margin-right、margin-bottom屬性，這樣的結果自然會比我們期望的要多出來右邊和下方的，這個時候我們通過ul的父級來設定width/height屬性，然後overflow:hidden把多餘的隱藏掉。好方法，呵呵！
解決方案請看圖：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="robots" content="all" /> <meta name="author" content="" /> <meta name="Copyright" content="CopyRight 2007" /> <meta name="keywords" content="CSS,overflow屬性" /> <meta name="description" content="巧用overflow:hidden解決中間間隔問題" /> <title>巧用overflow:hidden解決中間間隔問題</title> <style type="text/css"> *{margin:0;padding:0;} body{text-align:center;background:#CCC;} ul{list-style:none;} .main {background:white;height:800px;width:597px;margin:0 auto;} .box {width:595px;height:205px;margin:20px auto;overflow:hidden;background:white;} .box ul {width:600px;height:210px;} .box li {float:left;margin-right:5px;margin-bottom:5px;} .box div {background:white;background:#f7f7f7;width:293px;height:98px;border:1px solid #CCC} .box h2 {background:#9CC;text-align:left;text-indent:10px;font-size:12px;height:24px;line-height:24px;} </style> </head> <body> <div> <h1>巧用overflow:hidden解決中間間隔問題</h1> <div> <ul> <li> <div> <h2>Title</h2> <p>Content</p> </div> </li> <li> <div> <h2>Title</h2> <p>Content</p> </div> </li> <li> <div> <h2>Title</h2> <p>Content</p> </div> </li> <li> <div> <h2>Title</h2> <p>Content</p> </div> </li> </ul> </div> </div> </body> </html>
以上就是用margin和overflow屬性實現div間距的方法_經驗交流的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
