Even when I'm using this simple code, the browser shows a little offset on left and top. How to fix this. Code is below:
<html>
<head>
<style="text/css">
#container{
width: 100px;
height: 100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
It's because most browsers use a standard CSS stylesheet (see http://www.w3.org/TR/CSS21/sample.html).
One of the rules sets the margin of the body to 8 pixels:
body {
margin: 8px;
}
You can disable it by setting the margin to 0 pixels:
body {
margin: 0;
}
See this JSFiddle for more details.
Try to add this css:
* {
margin: 0;
padding: 0;
}
even better:
*{
margin: 0 auto;
padding: 0;
}
This worked for me all the time:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Make the margin-top and margin-left of html and body 0.
html, body{
margin-top: 0;
margin-left:0;
}
Related
My header does not fully covers my page making the background color overlaps them both together.
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: black;
background-size: 100% auto;
margin-left: 0;
margin-top: 0;
}
</style>
</head>
<body style="background-color: blue;">
<div id="header">
<p>hi</p>
</div>
</body>
</html>
This is because browsers have a default margin / padding.
//edit HTML default body margin
Add this to your css
html,body{
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
You need to set both html and body height, then #header height, like so
html, body, #header {
height: 100%;
margin: 0;
padding: 0;
}
#header {
background-color: blue;
}
p{
margin: 0;
padding: 0;
}
<div id="header">
<p>
Hi!
</p>
</div>
If you inspect the html and check the CSS applied to body tag, you will see that it has a default margin: 8px. You will have to make it 0.
Use margin: 0px to set the new margin to body tag.
Firefox (for example) indicates that there is a "border" of 8. Adding border: 0 to body's style made the thin blue borders to the left and right disappear. Is that what you wanted?
here is a JS Fiddle
I have already tried a couple of different things such as body { margin:0; padding:0;} it doesn't work
body {
margin: 0;
width: 100%;
height: 3000px;
}
Look at the header margin:
#header {
width: 100%;
/*margin: 20px 0;*/
z-index: 1;
}
The space comes from this. Delete it.
this is called Margin Collapsing..
try replacing this..
#header {
width: 100%;
z-index: 1;
}
FIDDLE
and refer this for Detailed Answer
Add reset.css file to your webpage. ask google for reset.css
margin: 0px 20px 0 20px; or margin-top:-10px;
try this
I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps
Here's my style sheet.
I'm trying to get the margin around my body to have a different color from the body itself. Here's my beginning code. Is a reset section really necessary? Can someone tell me what I'm doing wrong...
#charset "utf-8";
html {
color: #d9a552;
}
body {
display: table;
margin: auto;
background: white ;
width: 960px;
margin-top: 20px;
max-width: 1050px;
height: 100%;
font-weight: 300;
}
What you're looking for is a border. If you want to make the margin around your body red, simply use this:
body {
margin: 0;
border: 10px solid red;
/*and this is to make it stretch all the way*/
height: 100%;
box-sizing: border-box;
}
html {height:100%;}
as can be seen in this demo.
You may want to try adding padding-top: 20px; to the html instead of margin-top: 20px; with the body:
<html>
<head>
<style>
html {
padding-top: 20px;
background: #d9a552;
}
body {
display: table;
margin: auto;
background: white;
width: 960px;
max-width: 1050px;
height: 100%;
font-weight: 300;
}
</style>
</head>
<body>
</body>
</html>
I believe you also want to change color: #d9a552; to
background: #d9a552;
or
background-color: #d9a552;
Here's my solution: I added section tag immediately following the body tag. I gave it a class id of 'mainBody'. Then I adjusted the code as follows:
I know I can't give myself credit, but I thought I would share my solution for someone else to use. I will give both you guys credit for steering me in the right direction.
Thank you...
I need a div-header like the blue facebook header which has no free space on top and on the left/right side.
My actually code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#header {
height: 100px;
background-color: #3B5998;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
I add extra no marigin and no padding, but i still have some free space on all 4 sides of my header...
html, body { margin: 0; padding: 0; }
Try this
html, body {
padding: 0;
margin: 0;
}
#header {
float: none;
width: 100%;
height: 100px;
background-color: #3B5998;
}
By default every browsers puts some amount of margin/padding around the body of the document.
To remove it you can add a css style in your html
html, body {
margin: 0;
padding: 0;
}
Also, it is worth noticing that browsers attach insert various kinds of styles to elements, and these styles can be very different in different browsers. There are some style sheet files out there that can fix it, one of them could be found here
http://www.cssreset.com/