Removing space at the top left and right of div
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 comple开发者_开发技巧tely 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
加载中,请稍侯......
精彩评论