Maison > interface Web > tutoriel HTML > CSS学习--DIV布局的空白间距_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 12:28:41
original
1385 Les gens l'ont consulté

今天无聊就把以前的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>
Copier après la connexion

代码演示效果如下:

  

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

body{ padding:0; margin:0;}div{ padding:0; margin:0; width:100%; position:relative; float:left;}
Copier après la connexion

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

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal