Home > Web Front-end > HTML Tutorial > 两个div之间为什么总有间隙?_html/css_WEB-ITnose

两个div之间为什么总有间隙?_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:44:33
Original
2222 people have browsed it

CSS HTML 布局 DIV


今天在做div+css布局网页。遇到了间隙的问题。刚接触,求指点...
下面为html代码:
<div id="container1"><!--页面层容器页面层容器 -->    <div id="top1">最上面绿色部分<!--页面头部-->    </div>   <div id="banner1">上面灰色部分<!--页面头部-->    </div>      <div id="pagebody1"><!--页面主体页面主体-->            <div id="left1">左侧栏<!--侧边栏-->        </div>                    <div id="right1">右侧栏<!--主体内容-->        </div>     </div>       <div id="footer1">页面底部<!--页面底部-->   </div></div>
Copy after login

下面为CSS代码:
/*页面层容器1*/#container1 {width:800px;margin:0px auto;background:#369;}/*页面头部1*/#top1 {background:#090;width:730px;margin:0 auto;}#banner1 {background:#999; /*设置背景颜色为灰色*/ width:730px; /*设定层的宽度*/ margin:0 auto; /*层居中*/  /*设定高度*/  /*border-bottom:5px solid #F06;画一条红色实线*/  clear:both; /*清除浮动*/}#pagebody1 { width:730px; /*设定宽度*/margin:0 auto; /*居中*/background:#F00;/*设置主体背景颜色为大红色*/clear:both; /*清除浮动*/}#left1 { float:left; /*浮动居左*/clear:left; /*不允许左侧存在浮动*/width:500px; /*设定宽度*/height:240px; text-align:left; /*文字左对齐*/overflow:hidden; /*超出宽度部分隐藏*/background:#CCC;/*设置背景颜色为灰白色*/}#right1 { float:right;/*浮动居右*/clear:right; /*不允许右侧存在浮动*/width:230px; /*设定宽度*/ height:240px;text-align:left; /*文字左对齐*/ overflow:hidden; /*超出宽度部分隐藏*/background:#9CC;/*设置背景颜色为浅蓝色*/}#footer1 {background:#06F;height:35px;clear:both;margin:0 auto;}/*自己设定的div部分结束*/
Copy after login


所有padding,margin什么都改了,还是对不齐。。。麻烦看下错到哪里了?

回复讨论(解决方案)

刚刚在DW中又看了一下,发现是一个空格占了位子,所以导致两个div一直不能无间隙贴合。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template