I'm a new comer to web designing. I created my web page layout using CSS and HTML as below. The problem is even though i set the margin to 0, the upper margin is not setting to 0 and leaves some space. How can i clear this white space?
Screen Shot of the problem
Style Sheet
<style type="text/css">
body{
margin:0 auto;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
</style>
HTML
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
Here's the whole file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
margin: 0 !important;
padding: 0 !important;
}
body{
margin:0; padding: 0;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
</html>
The answer is
Try...
body {
margin: 0;
padding: 0;
}
Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.
It seems that nobody actually read your question and looked at your source code. Here's the answer you all have been waiting for:
#header_content p {
margin-top: 0;
}
add this code to the starting of the main CSS.
*,html,body{
margin:0 !important;
padding:0 !important;
box-sizing: border-box !important;;
}
Try
body {
margin: 0;
padding: 0;
}
instead of
.body {
margin: 0;
padding: 0;
}
Do not select body with class selector.
I just started learning CSS today and encountered the same problem and I think You don't need to reset style of all HTML tags. You need to reset default margin of top HTML You used, which is paragraph tag. And I know this is old question, but maybe my solution below will help somebody.
Try this:
body{
margin: 0;
background:#F0F0F0;
}
p{
margin: 0;
}
After reading this and troubleshooting the same issues, I agree that it is related to headings (h1 for sure, havent played with any others), also browser styles adding margins and paddings with clever rules that are hard to find and over-ride.
I have adapted a technique used to apply the box-sizing property properly to margins and paddings. the original article for box-sizing is located at CSS-Tricks :
html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}
So far it is exactly the trick for not using complex resets and makes applying a design much easier for myself anyways. Hope it helps.
you should have either (or both):
- a paddding != 0 on body
- a margin !=0 on #header
try
html, #header {
margin: 0 !important;
padding: 0 !important;
}
The margin is the "space" outside the box, the padding is the "space" inside the box (between the border and the content).
The !important prevent overriding of property by latter rules.
It's very simple. just add this to the body -
body{
margin:0;
padding:0;
overflow:hidden;
}
Try
html, body{
margin:0 !important;
padding:0 !important;
}
Just use this code at the Start of the main CSS.
* {
margin: 0;
padding: 0;
}
The above code works in almost all Browsers.
h1 {
margin-top:0;
padding-top: 0;}
It' s just a misunderstanding with h1 tag. You have to set h1 tag margin-top and padding-top to 0 (zero).
You need to set the actual page to margin:0 and padding: 0 to the actual html, not just the body.
use this in your css stylesheet.
*, html {
margin:0;
padding:0;
}
that will set the whole page to 0, for a fresh clean start with no margin or paddings.
Source: Stackoverflow.com