Home > Article > Web Front-end > CSS学习--DIV布局的空白间距_html/css_WEB-ITnose
CSS学习--DIV布局的空白间距_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:28:411345browse
今天无聊就把以前的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的高度居然变高了。这是为什么呢？慢慢研究。
Statement：
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
Previous article：关于css部份技巧,div/IE6/IE7/IE8/FF_html/css_WEB-ITnoseNext article：div+css标准布局常见问题及解决办法_html/css_WEB-ITnose