I am creating a website.
I have written the HTML part and now I am writing the stylesheet. But there is always some space above my header. How can I remove it?
My HTML and CSS code is given below.
body{_x000D_
margin: 0px;_x000D_
padding: 0px;_x000D_
}_x000D_
_x000D_
header{_x000D_
margin: 0px;_x000D_
padding: 0px;_x000D_
height: 20em;_x000D_
background-color: #C0C0C0;_x000D_
}
_x000D_
<header>_x000D_
<h1>OQ Online Judge</h1>_x000D_
<form action="<?php echo base_url();?>/index.php/base/si" method="post">_x000D_
<label for="email1">E-mail : </label><input type="text" name="email" id="email1">_x000D_
<label for="password1">Password : </label><input type="password" name="password" id="password1">_x000D_
<input type="submit" name="submit" value="Login">_x000D_
</form>_x000D_
</header>
_x000D_
This question is related to
css
html
margin
html-heading
To prevent unexpected margins and other browser-specific behavior in the future, I'd recommend to include reset.css in your stylesheets.
Be aware that you'll have to set the h[1..6] font size and weight to make headings look like headings again after that, and many other things.
I solved the space issue by adding a border and removing is by setting a negative margin. Do not know what the underlying problem is though.
header {
border-top: 1px solid gold !important;
margin-top: -1px !important;
}
This css allowed chrome and firefox to render all other elements on my page normally and remove the margin above my h1 tag. Also, as a page is resized em can work better than px.
h1 {
margin-top: -.3em;
margin-bottom: 0em;
}
It is probably the h1
tag causing the problem. Applying margin: 0;
should fix the problem.
But you should use a CSS reset for every new project to eliminate browser consistencies and problems like yours. Probably the most famous one is Eric Meyer's: http://meyerweb.com/eric/tools/css/reset/
It is good practice when you start creating website to reset all the margins and paddings. So I recommend on start just to simple do:
* { margin: 0, padding: 0 }
This will make margins and paddings of all elements to be 0, and then you can style them as you wish, because each browser has a different default margin and padding of the elements.
Just for completeness, changing overflow
to auto
/hidden
should do the trick too.
body {_x000D_
margin: 0px;_x000D_
padding: 0px;_x000D_
}_x000D_
_x000D_
header {_x000D_
margin: 0px;_x000D_
padding: 0px;_x000D_
height: 20em;_x000D_
background-color: #C0C0C0;_x000D_
overflow: auto;_x000D_
}
_x000D_
<header>_x000D_
<h1>OQ Online Judge</h1>_x000D_
_x000D_
<form action="<?php echo base_url();?>/index.php/base/si" method="post">_x000D_
<label for="email1">E-mail :</label>_x000D_
<input type="text" name="email" id="email1">_x000D_
<label for="password1">Password :</label>_x000D_
<input type="password" name="password" id="password1">_x000D_
<input type="submit" name="submit" value="Login">_x000D_
</form>_x000D_
</header>
_x000D_
Try margin-top:
<header style="margin-top: -20px;">
...
Edit:
Now I found relative position probably a better choice:
<header style="position: relative; top: -20px;">
...
Source: Stackoverflow.com