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
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'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%;
}
When we include an image in a web page with the following code
<html><body>
<img src="http://www.example.com/abc.jpg">
</body></html>
The browsers render it so that there is a margin of few pixels to the left and the top. I want the image to stick to the the left and top borders.
Help needed with that.
Thanks
You have several options:
Use a CSS reset. Simple example:
* { padding: 0; margin: 0; }
Use position: absolute; to "forcefully" put the image wherever you want it to be (can be controlled with top, right, bottom and left.
Those are the body's margins.
I always use this styling in my css file:
html, body { margin: 0px; padding: 0px; border: none; }
or you can write it inline, in your case:
<body style="margin:0px; padding:0px;">
Try this with CSS
<img src="http://www.example.com/abc.jpg" class="left-image">
html, body, img{
padding:0px;
margin:0px;
}
img.left-image{
float:left; /* it may require if you have more elements in same container, not always */
}
or you can always position, example if you want 10px from top and 10px from left
img.left-image{
position:absolute;
left:10px;
top:10px;
}
I was playing with a slideshow in jQuery today. I managed to create it when I noticed strange thing. The div #feature in which the slideshow is placed seems to be somehow glued to its parent element #content. When I add margin: 10px auto to the #feature div, the #content div is also lowered down by 10px relative to its parent element.
Can anyone tell me what have I done wrong here?
Providing you with the whole code would create a mess, but here's a link:
CSS for #feature:
#feature {
width:940px;
margin: 10px auto;
position: relative;
height:500px;
overflow: hidden;
clear: both;
box-shadow: 0px 0px 5px 2px #000;
}
and CSS for #content:
#content{
min-height:800px;
background-color: #fff;
}
My friend noticed an interesting thing. If you add margin-bottom: 30px to #menu the empty 10px space in content is filled correctly although the margin problem is still not solved.
position: relative does just that... makes any element that this applies to have its position become "relative" to its parent container.
#feature is a child of #content, so #feature's position becomes relative to the position of #content. When you add that 10px margin to #feature, it moves down 10px from #content.
Try adding overflow:auto; to #content. It may help.
Adding overflow prevents margins from collapsing
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.
from https://www.w3.org/TR/CSS2/box.html#collapsing-margins