Menu
I created a web page with 3 div tags with some content in each div and with background colors set to the div elements I found some white space appearing between the div elements.
I have tried a lot to remove these white space using various properties like outline, margin, padding etc, but I failed.
I want to remove white spaces between my div without using 'float' property.
webpage snapshot
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0px;
background-color:green;
}
.container
{
margin-top:0px;
margin-bottom:0px;
margin-left:10%;
margin-right:10%;
}
.head
{
background-color:gray;
}
.nav
{
background-color:blue;
}
.content
{
background-color:lime;
}
</style>
</head>
<body>
<div class="container">
<div class="head">
<h1>Welcome to my page!</h1>
</div>
<div class="nav">
<h2>some text</h2>
</div>
<div class="content">
<p>Some text in content</p>
</div>
</div>
</body>
</html>
922
h1, h2, p {
margin: 0;
}
Browser adds margins on heading elements and paragraphs by default. You remove it via CSS.
113
The space between your divs is because of default h and p elements's margins. I added just this css rule to override default margins:
h1, h2, p{
margin: 0;
}
Please check this snippet:
body{
margin:0px;
background-color:green;
}
.container{
margin-top:0px;
margin-bottom:0px;
margin-left:10%;
margin-right:10%;
}
.head{
background-color:gray;
}
.nav{
background-color:blue;
}
.content{
background-color:lime;
}
h1, h2, p{
margin: 0;
}<body>
<div class="container">
<div class="head">
<h1>Welcome to my page!</h1>
</div>
<div class="nav">
<h2>some text</h2>
</div>
<div class="content">
<p>Some text in content</p>
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
