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>
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;}
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.