There's this little white gap at the end of my document. I right click and inspect the element and it says it's the body. Any idea how to fix this?
Try
body {
margin: 0px;
padding: 0px;
}
If you don't need border you may add third rule (one of):
border-width: 0px;
border: none;
If you need to remove only this on down of the screen, use:
margin-bottom: 0px;
padding-bottom: 0px;
This won't even touch this on left or right.
add this code in your css:
html, body{
height:100%;
}
Related
I am starting to work with css and have basic issue.
I have a div element:
.top {
background-color: #3B5998;
margin-left: 0px;
margin-top: 0px
}
<div class="top">...</div>
The colour code is taking effect (good).
The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.
You need to reset both the default padding and margin attributes in your stylesheet:
html, body {
margin: 0;
padding: 0;
}
As #Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.
It also looks like you're missing a semi-colon in your css, it should look as follows:
.top
{
background-color:#3B5998;
margin-left:0px;
margin-top:0px;
}
There's padding on the <body> of the page. You can fix this like so:
body
{
padding: 0;
}
I had the same problem . just try this :
html, body {
margin-top:-13px;
}
If you need some padding inside the div, you should choose padding:
padding:top right bottom left;
example:
padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */
Similarly to control the space outside the div, you can use margin.
Margin will use exact same formula.
After long time I found the correct solution for me:
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
We need define the overflow in the horizontal.
If other answers don't work, try position:absolute; top: 0px; left: 0px; or display:flex.
I used this and it worked for me:
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
}
the issue i had lately also, but even though i used padding:0px even added the !important on body didn't solved it... the actual problem was its position ... which you can do by using background-position:50% 50%; or by automatically let it choose the center position of the screen .. which is margin:0 auto; or margin:auto; that solved it for me ... hope for you all also. i realized the margin is what was needed after i tried #HAS's response thanks man ur awesome ... sorry for zombify the post
margin: 0px; would remove all spaces around the element.
padding: 0px; clears the area around the content
you can try:
html, body {margin: 0px; padding:0px;}
body {margin: auto;}
with margin:auto; the browser calculates a margin.
You can also use
* {margin: 0px; padding: 0px;}
this will remove all default margins and spaces. But be careful while using:
position: absolute;
The 'position' property can take 4 values, static, relative, fixed and absolute. Then you can use top, bottom, left, right properties to position your element. This depends on your layout. This link might be useful https://www.w3schools.com/css/css_margin.asp
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
There is some background div for font:
#reset_font{
margin-top: -10px;
padding-right: -10px;
padding-left: -10px;
height: 800px;
width: 10%;
background-color: #00ff00;
}
And for top minus margin works, there is no space between font and window's top. But on the right there is thin line white line( without font) between window on right side and font.
If I set width to 101%, there is no space, but I don't like the idea.
It's quite messy to work with negative margins, as those margins might be browser specific.
What works when getting everything to the sides is something like this:
* {
margin: 0;
padding: 0;
border: 0;
}
Put that at the top of your css and you should be good.
The space that you see is for body and in some browser, for html. Just set the margin and padding to 0 for this two elements:
html, body {
margin: 0;
padding: 0;
}
Here is FIDDLE Demo without removing the gap.
Here is FIDDLE Demo by removing the gap.
I want to span my footer the entire width of the page.
It doesn't sound like much but I'm spending a lot of time trying to fix it.
I have put margin 0 padding 0 to body and html.
My footer has a 100% width.
My footer is out of the container div and sits at the bottom of the page. It does not reach both sides of the page, left with a space between each side.
How do I fix this?
I have the following code in my css:
body {
font-family: Arial, Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
footer {
clear: both;
padding: 0;
background-color: #ff0;
width: 100%;
}
in Chrome, use the dev tools (press F12) to inspect the element and see what's causing the space.
in Firefox, you can use Firebug.
my guess is that it's a border on the footer, but without seeing the code, it's /just/ a guess.
I am starting to work with css and have basic issue.
I have a div element:
.top {
background-color: #3B5998;
margin-left: 0px;
margin-top: 0px
}
<div class="top">...</div>
The colour code is taking effect (good).
The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.
You need to reset both the default padding and margin attributes in your stylesheet:
html, body {
margin: 0;
padding: 0;
}
As #Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.
It also looks like you're missing a semi-colon in your css, it should look as follows:
.top
{
background-color:#3B5998;
margin-left:0px;
margin-top:0px;
}
There's padding on the <body> of the page. You can fix this like so:
body
{
padding: 0;
}
I had the same problem . just try this :
html, body {
margin-top:-13px;
}
If you need some padding inside the div, you should choose padding:
padding:top right bottom left;
example:
padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */
Similarly to control the space outside the div, you can use margin.
Margin will use exact same formula.
After long time I found the correct solution for me:
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
We need define the overflow in the horizontal.
If other answers don't work, try position:absolute; top: 0px; left: 0px; or display:flex.
I used this and it worked for me:
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
}
the issue i had lately also, but even though i used padding:0px even added the !important on body didn't solved it... the actual problem was its position ... which you can do by using background-position:50% 50%; or by automatically let it choose the center position of the screen .. which is margin:0 auto; or margin:auto; that solved it for me ... hope for you all also. i realized the margin is what was needed after i tried #HAS's response thanks man ur awesome ... sorry for zombify the post
margin: 0px; would remove all spaces around the element.
padding: 0px; clears the area around the content
you can try:
html, body {margin: 0px; padding:0px;}
body {margin: auto;}
with margin:auto; the browser calculates a margin.
You can also use
* {margin: 0px; padding: 0px;}
this will remove all default margins and spaces. But be careful while using:
position: absolute;
The 'position' property can take 4 values, static, relative, fixed and absolute. Then you can use top, bottom, left, right properties to position your element. This depends on your layout. This link might be useful https://www.w3schools.com/css/css_margin.asp