Rumah >hujung hadapan web >html tutorial >CSS学习--DIV布局的空白间距_html/css_WEB-ITnose
CSS学习--DIV布局的空白间距_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:28:411382semak imbas
今天无聊就把以前的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的高度居然变高了。这是为什么呢？慢慢研究。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于css部份技巧,div/IE6/IE7/IE8/FF_html/css_WEB-ITnoseArtikel seterusnya：div+css标准布局常见问题及解决办法_html/css_WEB-ITnose