How do I remove the top margin in a web page?
I had similar problem, got this resolved by the following CSS:
body {
margin: 0 !important;
padding: 0 !important;
}
How to remove the margin at the top of my page
Set margin: 0;
to <h1>
element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left
of <ul>
elements, or margin-top
/ margin-bottom
of <p>
elements, etc.
You need to reset their default styles when using them at the borders of your page.
Removing body margin in CSS
I would say that using:
* {
margin: 0;
padding: 0;
}
is a bad way of solving this.
The reason for the h1 margin popping out of the parent is that the parent does not have a padding.
If you add a padding to the parent element of the h1, the margin will be inside the parent.
Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.
How to remove top margin from a website with nested containers?
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
HTML/CSS - Remove top and side margins
add margin:0 to the body tag
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
margin:0;
}
How to remove margin space around body or clear default css styles
body
has by default 8px
margins: http://www.w3.org/TR/CSS2/sample.html
body {
margin: 0; /* Remove body margins */
}
Or you could use this useful Global reset
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
If you want something less *
global:
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
some other CSS Reset:
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…
Removing 10px of margin at top of HTML pages
The H1 tag has a standard margin of 10px which causes this. Try a reset:
*,html,body {
margin:0;
padding:0;
}
The "*" character is a global selector.
Related Topics
Setting the Granularity of the HTML5 Audio Event 'Timeupdate'
Open a Direct File on the Hard Drive from Firefox (File:///)
"Compile" CSS into HTML as Inline Styles
How to Open Submenu on Hover of Main Menu
How Would I Remove the Gap Between the Image and the Bootstrap Nav Bar
Rounded Corners on Rectangular Image Using CSS Only
Force Transition to Complete on Hover CSS
3 Column Layout (Fixed, Fluid, Fixed) with Minimum Width
Html5 Placeholder Disappears on Focus
Why Is "" Being Injected into My HTML
Failed to Load Resource, Plugin Handled Load on iOS
How to Cut a Circular Part from an Image
Vertically Centering a Div in Body
Change the Z Index of Flash Content