How can I remove space between div and page

Question

<!DOCTYPE html>

<html>

<head>
    <title>Functions</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width initial-scale=1">
  
</head>

main body

    <div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;">

I want to make this div use 100% of width of the screen

</body>

</html>

enter image description here

score 2 · Answer 1 · answered Apr 26 '21 at 19:09

2

It's default 8px body margin.

body {margin: 0;}

answered Apr 26 '21 at 19:09

pavel

26,538
10
45
61

this should be correct.. i've just checked on "my user agent stylesheet" – Alberto Sinigaglia Apr 26 '21 at 19:12
yes it worked. padding:0 didn't worked but margin:0 worked. Thanks – arslan anjum Apr 26 '21 at 21:13

score 2 · Answer 2 · answered Apr 26 '21 at 19:17

2

You'll need to remove any padding and margins that were auto-applied to the <html> and <body> tags by default, something some browsers do. Once you remove that, your element will display full-width:

html, body { margin: 0; padding: 0; }
body { background-color: red; }
div { background-color: #fff; }

<!DOCTYPE html>
<html>
<head>
  <title>Functions</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1">
</head>
<div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;"></div>
</body>
</html>

answered Apr 26 '21 at 19:17

Brandon McConnell

5,776
1
20
36

Up vote for tackling html along with body to settle the annoying issue. – Syed Apr 26 '21 at 19:22
`html` has `margin: 0; padding: 0` by default, `body` has `padding: 0;` by default too. `body {margin: 0}` is right minimal answer for question. – pavel Apr 26 '21 at 19:24
@pavel this is not consistent for all browsers. This is the only effective method of correcting for all. – Brandon McConnell Apr 26 '21 at 19:30
@BrandonMcConnell: at least one browser&version where is set margin/padding for html or padding for body. Thanks. – pavel Apr 26 '21 at 19:31

Syed · Answer 3 · 2021-04-26T20:44:18.910

1

You were almost there, just had to remove default margin and padding from the body tag it self and everything else would have fit in.

body {
margin :0;
background-color: red;
}

div {
background-color: white; width: 100%; height: 80px;
}

<!DOCTYPE html>

<html>

<head>
    <title>Functions</title>

    <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body>
 <div>I am div</div>

</body>
</html>

edited Apr 26 '21 at 20:44

answered Apr 26 '21 at 19:14

Syed

696
1
5
11

It's most likely due to browsers having a default stylesheet, for example [Chrome automatically adds 8px margin for the body of the page.](https://gist.github.com/ambidexterich/34828a904dd97dd2a345) – Kevin Eldurson Apr 26 '21 at 19:16
1

yes it seems to exist in almost every other browser you know almost a shadow standard of sorts. its annoying yes, my suggestion for any one starting off new on HTML/CSS learning make use of normalise css. https://github.com/necolas/normalize.css – Syed Apr 26 '21 at 19:18
1

`Padding: 0` is default value for `body`. You don't need to write it again. Just set `margin: 0;`. – pavel Apr 26 '21 at 19:23
@pavel that is the thing here, some browsers and their versions either take into consideration padding, some take into consideration margin. You never know so it has always been a kind of good practice to apply both as fallback. just to be sure. – Syed Apr 26 '21 at 19:25
@Syed: which browser in which version? Isn't good practice to redeclare default values. Answer 'maybe something somewhere could be in future'... isn't answer. Body's margin is due to spec. – pavel Apr 26 '21 at 19:27
@pavel indeed indeed please allow me to forward you to this answer on the subject https://stackoverflow.com/a/13128048/10588650 and this https://stackoverflow.com/a/23799232/10588650 . – Syed Apr 26 '21 at 19:36
@Syed: which browser in which version by default, of course? User style isn't an asnwer, sorry. Or you redeclare all default values to all elements for case anybody set something into user-style? – pavel Apr 26 '21 at 19:40
@pavel well discussion on reference term practice (it does not imply default as your comment may have suggested) goes back to almost 2007 and prior, here is discussion by Eric A. Meyer who is holds expertise on the subject, shedding light on how the whole reset css emerged http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ and there experimented version of reset https://meyerweb.com/eric/tools/css/reset/reset200802.css ...It seemingly just took of from their. This is historic evolution/adaptation pe rsay – Syed Apr 26 '21 at 20:28
Other than above since modern standard as updated from HTML4 onward https://www.w3.org/TR/CSS2/sample.html margin is what w3 standards would suggest however, it is also the fact that it is up to individual browser vendor to to implement those standards into their BOM. In that case it has been and still in some shape and form a practice not a default behaviour. Oh believe the whole reset phenomenon sparked what we call augmented quirk mode now we call it behind the flag mode how browsers go about it. – Syed Apr 26 '21 at 20:35
@pavel I would like to iterate though other then practice however low end gathered it may be, for any one coming on to discussion and on learning curve to CSS, Pavel comment as stated above is correct and should be adopted as per 2021 and w3 standards, in all modern browsers crica 2017 or so. – Syed Apr 26 '21 at 20:43

How can I remove space between div and page

3 Answers3