如何使元素采用html元素的宽度？

Question

For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:

<div>Hello!</div>

And I apply the following styles:

body {
  background: blue;
}

div {
  background: green;
  width: 100%;
}

Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.

I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?

Answer 1

Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.

Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset .

Answer 2

Body element has default margin at every direction 8px long, so just rewrite this default.

body {
   margin: 0;
   background: blue;
}

@Edit: ...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Answer 3

You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.

 body { background: blue; margin: 0px } div { background: green; width: 100%; } 

 <div>Hello!</div>