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

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

WBOY
發布: 2016-06-24 12:28:41
原創
1396 人瀏覽過

今天无聊就把以前的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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板