Heim >Web-Frontend >HTML-Tutorial >CSS学习--DIV布局的空白间距_html/css_WEB-ITnose
CSS学习--DIV布局的空白间距_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:28:411407Durchsuche
今天无聊就把以前的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的高度居然变高了。这是为什么呢？慢慢研究。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：关于css部份技巧,div/IE6/IE7/IE8/FF_html/css_WEB-ITnoseNächster Artikel：div+css标准布局常见问题及解决办法_html/css_WEB-ITnose