Removing space at the top left and right of div_问答_开发者

Removing space at the top left and right of div

开发者 https://www.devze.com 2023-03-18 16:57 出处：网络

I am starting to work with css and have basic issue. I have a div element: .top { background-color: #3B5998;

相关专题：css

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