small margin / gap at the top of document
In your CSS file add this:
html, body { margin: 0; padding: 0; }
Gap at top of page despite margin:0 and padding: 0
I think this is caused by the use of position: relative and your h1 element inheriting a margin by default. When you use position: relative, the margin does not seem to be shifted with the actual content and therefore gets applied to the top of the page.
I have changed the relevant CSS to fix this:
.container_banner h1{
font-size: 48px;
position: relative;
top: 130px;
left: 250px;
width: 400px;
margin-top: 0;
}
You may need to do the same for any other elements that are set to position: relative and have a margin (e.g. h3 tags)
It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.
How can I remove the gap from the top of page?
After troubleshooting and looking for hidden or erroneous UTF characters we figured out that the cause was an un-closed meta charset tag.
<meta charset="UTF-8"/>
White space at top of page
Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
UPDATE: Use the Universal Selector Instead:
@Frank mentioned that you can use the Universal Selector: *
instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Gap between first element and top of page
That's because of the p's margin, you can just remove it:
p {
margin: 0;
}
Small unwanted space on top and bottom of page
Add this to your CSS:
* {
margin: 0;
padding: 0; }
H1 makes space/gap between header and top of page
Heh, it's a very interesting effect - "margin collapsing".h1
has default margin-top
.
Parent and first/last child
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block from the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
from the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
To solve this problem add padding-top
to container or replace header margin-top
with padding-top
. Also can set h1
margin-top
to 0.
You can read more about it here.
Why is there white space at the top of my HTML/CSS website?
It's caused by margin collapsing phenomena. See related question. If you remove content of your main.css you will see that layout becomes "normal" (e.g. no white space on top), so normalize.css is not the cause of the issue.
How to fix?
Simply, add this to your normalize.css *{} section. See fiddle.
* {
overflow:hidden; /* or auto */
}
Related Topics
Have a Fixed Position Div That Needs to Scroll If Content Overflows
Prevent Flex Items from Overflowing a Container
Force Sidebar Height 100% Using CSS (With a Sticky Bottom Image)
Does 'Position: Absolute' Conflict with Flexbox
How to Set the Height of a Div Based on a Percentage-Based Width
Align Button at the Bottom of Div Using CSS
How to Style the Ul List to a Single Line
How to Align Spans or Divs Horizontally
Display Property Differences for Inline-*Something*
Make Scrollbars Only Visible When a Div Is Hovered Over
How Is the "Greater Than" or ">" Character Used in CSS
Apply Webkit Scrollbar Style to Specified Element