首页 > web前端 > html教程 > CSS学习--DIV布局的空白间距_html/css_WEB-ITnose

CSS学习--DIV布局的空白间距_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:28:41
原创
1386 人浏览过

今天无聊就把以前的CSS Demo翻出来看看,也就动手写了几条代码,如下所示:

<style type="text/css">div{ padding:0; margin:0; width:100%; position:relative;}.col1{ background-color:#0C0;}.col2{background-color:#CF0;}.col3{background-color:#06C;}</style></head><body><div class="col1"><h1>1</h1></div><div class="col2"><h1>2</h1></div><div class="col3"><h1>3</h1></div></body></html>
登录后复制

代码演示效果如下:

  

从以上可以发现,各DIV之间存在间隔,而且默认的情况下DIV在各主流浏览器上会留一定的空白间距。

body{ padding:0; margin:0;}div{ padding:0; margin:0; width:100%; position:relative; float:left;}
登录后复制

在源代码加上以上代码后,效果如下: 

各DIV之间的空白间距虽然消失了,但是可已发现没有设定高度的DIV的高度居然变高了。这是为什么呢?慢慢研究。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板