作者cat99961 (阿汤)
看板Web_Design
标题[问题] 巢状DIV上下间距的问题该如何解决呢?
时间Tue Sep 2 23:14:41 2014
请问以下内容,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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1409670883.A.22E.html
1F：→ vi000246: 在top跟left的style里加上float:left 09/03 00:04
3F：推 aspdoctor: inline-block的空白要用letter-spacing跟word-spacing 09/03 17:01
4F：→ aspdoctor: 来解 09/03 17:01
5F：→ cat99961: 抱歉 那个网页我有点看不懂 09/03 20:27
6F：→ cat99961: 我在inline-block後面加上letter-spacing:-5px; 09/03 20:31
7F：→ cat99961: word-spacing:-5px;结果没办法解决ㄝ 09/03 20:32
8F：推 eight0: 简单的说，把 </div> ... <div> 之间的空白、换行删掉 09/03 21:59
9F：推 sycc: 楼上是最简单的方法，如果你不是排版控的话XD 09/04 03:51
10F：→ cat99961: 我弄出来了 我把上下的外距设为负值 09/04 16:01
11F：推 yshlptt: 应该不用设定负值喔，设定 vertical-align: top 即可 09/05 11:26