Home > Web Front-end > HTML Tutorial > CSS learning--blank spacing of DIV layout_html/css_WEB-ITnose

CSS learning--blank spacing of DIV layout_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:28:41
Original
1384 people have browsed it

I was bored today so I dug out the old CSS Demo and wrote a few codes, as shown below:

<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>
Copy after login

The code demonstration effect is as follows:

 

From the above, it can be found that there are gaps between each DIV, and by default, DIVs will leave a certain amount of blank space on all major browsers.

body{ padding:0; margin:0;}div{ padding:0; margin:0; width:100%; position:relative; float:left;}
Copy after login

After adding the above code to the source code, the effect is as follows:

Although the blank space between each DIV disappears, However, it has been discovered that the height of the DIV with no set height has actually become higher. Why is this? Study slowly.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template