This question already has answers here:
A weird spacing appears when I use margin property
(3 answers)
Closed 7 years ago.
How can I remove the empty space above and at the left of the "welcome" box?
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<link rel= "stylesheet" href = "style.css" />
</head>
<body background-color = #920000;>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</>
</ul>
</nav>
</html>
Thank You.
Regards,
Micky.
It's 8px default margin on body.
body {margin: 0;}
Set bodyand htmlto margin:0and padding:0
body,html{
margin:0;
padding:0;
}
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<link rel= "stylesheet" href = "style.css" />
</head>
<body background-color = #920000;>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</>
</ul>
</nav>
</html>
*{margin:0; padding:0;}
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8"/>
<link rel= "stylesheet" href = "style.css" />
</head>
<body background-color = #920000;>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</>
</ul>
</nav>
</html>
To reset all padding and margin just do *{padding: 0; margin:0;}
You need to remove default body margin :
body {
margin: 0;
}
(Ansewering because I don't have enough reputation to comment previous answer.)
It's indeed body default browser padding.
Note that you can avoid some or every default browser behaviours by using some CSS-reset sheets.
I personnally love Normalize as a good reset base. Others exist.
The general goal behind CSS resets is to make sure every browser custom rule won't break your design depending on the browser your user use.
Hope I could help.
#.page is wrong selector also i did not get you why are you placing nav outside the body? and also i'm getting porper output as you want without changing your code.
#.page{
background-color: #920000;
margin: 0;
padding: 0;
}
.heading{
background-color: #666666;
padding: 0;
margin: 0;
border: 0;
}
h1{
margin: 0;
padding: 0;
}
<body>
<div class = "heading">
<h1>"welcome"</h1>
</div>
</body>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
according to the code , i want to marge the inner div "smedia" down ,it's not working unless i'm giving the outer div "layout" a padding value , need an explanation for that
also i figured that this can be solved by giving the "inner div" inline-block value ONLY not even block value , i need an explanation for that also
h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
margin: 0;
padding: 0;
}
li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}
.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 0px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p3css.css" >
</head>
<body>
<h1 class="header-text">Clean Profile Widget</h1>
<div class="layout">
<div class="smedia">
<span class="logo">FB</span>
<span class="logo">TWR</span>
</div>
</div>
</body>
</html>
when giving padding
h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
margin: 0;
padding: 0;
}
li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}
.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 1px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p3css.css" >
</head>
<body>
<h1 class="header-text">Clean Profile Widget</h1>
<div class="layout">
<div class="smedia">
<span class="logo">FB</span>
<span class="logo">TWR</span>
</div>
</div>
</body>
</html>
thanks in advance.
The thing you miss is overflow: auto;. Adding it to parent container makes margin work just fine.
The problem you faced is called margin-collapsing and it's pretty widely known. You can read about it here or here.
You can read about use of overflow and how it affects elements here.
h1,
h2,
h3,
p,
div,
section,
header,
footer,
section,
article,
nav,
ul,
html,
body {
margin: 0;
padding: 0;
}
li {
list-style-position: inside;
list-style-type: none;
}
body {
background-color: white
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.header-text {
text-align: center;
}
.layout {
overflow: auto;
width: 60%;
margin: auto;
background-color: #4DC1E8;
height: 300px;
padding-top: 0px;
}
.smedia {
width: 200px;
background-color: antiquewhite;
margin-top: 90px;
}
.logo {
border-right-style: solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p3css.css">
</head>
<body>
<h1 class="header-text">Clean Profile Widget</h1>
<div class="layout">
<div class="smedia">
<span class="logo">FB</span>
<span class="logo">TWR</span>
</div>
</div>
</body>
</html>
Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page
My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:
html {
background-color: green;
}
.body {
padding: 0;
margin: 0;
}
#logo {
font-size: 2rem;
border-right: 1px solid grey;
color: green;
}
header {
border-bottom: 1px solid grey;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="blah">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<p id="logo">Path</p>
</header>
<section class="hero">
</section>
<section class="content">
<p>hi</p>
</section>
</body>
</html>
have you tried "body" instead of ".body"?
Try :
#logo {
margin-top: 0px ;
}
body {
padding: 0px;
margin: 0px;
}
Try add This in your CSS:
html,body,header,section,p{
padding:0;
margin:0;
border:0;
}
it Works, No unwanted space.
here the fiddle :https://jsfiddle.net/osrrwrqn/
Use
html,body{
padding:0;
margin:0;
}
I have been working with CSS and HTML to create basically a banner and navbar. I've been trying to get it to stick to the very top, but after I saw it in chrome, I noticed both the body tag and the HTML tag are detatched. I've tried removing all the margins and padding from every single part that could be responsible for the space, but I couldn't get rid of it. What is a good way to do this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style/normalize.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li>Home</li>
<li>Demo</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
CSS code:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
nav
{
text-align: left;
}
nav ul
{
list-style: none;
/*margin: 0 10; corrected*/
margin: 0;
padding: 0;
}
nav li
{
display: inline-block;
}
nav a
{
font-weight: 800;
padding: 15px 10px;
font-size: 1em;
}
Screenshot (as requested):
I tried every solution here and nothing really worked, mainly because I don't have navigation in my simple page or a header.
What worked for me was using the universal selector like this:
*, html, body {
margin: 0;
padding: 0;
}
4 years later, hope it helps someone.
2 years later - I just solved a similar problem - I had extra spaces.
Try removing the blank spades before your first (it's indented with spaces or a tab in the code)
I had a similar problem just now and i resolved with
header {
position: absolute;
top: 0;
right: 0;
}
You can use this code snippet
body{
margin: 0%;
}
for more information please refer to the given website:
https://www.w3schools.com/css/css_boxmodel.asp
You can remove the space using below code
nav ul {
list-style: outside none none;
padding: 0px;
margin-top: 0px;
}
I want to add pasted text (that text goes down when user goes down of the page, etc.) at the top of my page, when somebody haven't got enabled JavaScript, something like that :
How to do this ? Is there any way to that using JavaScript or HTML ? I want not to use jQuery, because I don't know that language so good.
#EDIT : Sorry, that was my error - that cannot use JavaScript if user doesn't have JS enabled :)
This is a sample how you can make a info bar like SO:
HTML:
<noscript><div id="noscript"><p>NO JAVASCRIPT</p></div></noscript>
CSS:
div#noscript {
margin: 0 auto;
width: 100%;
padding: 10px 0;
position: fixed;
top: 0;
background: red;
z-index: 99999;
}
div#noscript p {
text-align: center;
color: white;
}
Here the JSfiddle
http://jsbin.com/AJUxayA/6/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="no_js_header">test</div>
<div id="content">content</div>
<div style="margin-top: 2200px"></div>
</body>
</html>
#no_js_header {
position:fixed;
width:100%;
background-color:red;
margin: 0px;
top: 0px;
left: 0px;
padding: 3px;
}
#content {
position: absolute;
top: 50px;
}
(uncomment for activation in the jsbin)
document.getElementById('no_js_header').style.display = 'none';
You can try using the noscript tag...
<noscript>
<div>
<p>ahhh, javascript is disabled!</p>
</div>
</noscript>
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
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.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.