How to make the background color of the header fill the entire width for a header,div etc?

Question

After looking at some answers I made the margin and padding of the div element 0 but still it does not make any changes to page! What's the reason behind this ?Can someone explain pls!.

<div style="margin:0px ; padding:0px; background-color:Grey">
<h1 style=" color:Orange ; text-align:center" id="title">Product Survey Form</h1>
</div>
<p style="color:blue ; text-align:center" id="description">After your every purchase from Serex technologies , we like to have a survey from <br> our customers in order to improves our services </p> 
<form id="survey-form" style="text-align:center">
   <label for="name" id="name-label">Name:</label>
  <input type="text" id="name" placeholder="First Name" required>
  <br>
<br>
   <label for="email" id="email-label">E-mail:</label>
  <input type="email" id="email" placeholder="Email" required>
  <br>
  <br>
   <label for="number" id="number-label">Age:</label>
  <input type="number" id="number" min="00" max="200" placeholder="Age">
  <br><br>
  <label for="dropdown" id="number-label">Gender:</label>
  <input list="dropdown" placeholder="Choose">
  <datalist id="dropdown">
   <option value="Male">
   <option value="Female">
   <option value="Others">
     </datalist>
  <p>What do you think about our service?</p>
  
     <label for="Excellent"> 
  <input id="Excellent" value="Excellent" type="radio" name="reviews">Excellent</label>
    <label for="ItsOkay!"> 
  <input id="ItsOkay!" value="Its Okay!" type="radio" name="reviews">Its Okay!</label>
     <label for="Hastobeimproved!"> 
  <input id="Hastobeimproved!" value="Has to be improved!" type="radio" name="reviews">Has to be improved!</label>
  <br><br>
  <p>Where have you heard about us?</p>
    <label><input type="checkbox" value="Newspapers " name="adverts"> Newspapers</label>
  <label><input type="checkbox" value="Relatives" name="adverts"> Relatives</label>
  <label><input type="checkbox" value="Television"name="adverts"> Television</label>
  <p>Additional Comments : </p>
  <textarea id="w3review" name="w3review" rows="4" cols="50" placeholder="Enter text here">
     </textarea>
  <br><br>
  <button type="submit" id="submit">Submit</button>
  
  
     
     
  
  
</form>

I have attached a image of the page here

The space is there probably because the `` element has a margin, [more details](https://stackoverflow.com/q/13127887/1552587) — Titus, Sep 05 '20 at 12:29
@Titus Yes, I think you're right I just added this property *{margin:0;padding:0} and it works fine!. — , Sep 05 '20 at 12:31
@ASN it worked ! , can you please explain the logic behind setting margin to -8px? — , Sep 05 '20 at 12:43

score 1 · Accepted Answer · answered Sep 05 '20 at 14:08

As @Titus says, this is because the body element has an 8px margin by default.

You need to remove this margin, and there are a few ways to do it as you have already been give, however they have varying degrees of usefulness based on consistency, flexibility and reusability.

If we look at the solutions you were given:

*{ margin:0; padding:0 } This removes all default margins and padding from all elements, so you now have to add it back to all the elements you want to keep it on.
div.yourdiv { margin:-8px; } This works by "stretching" the div outside of the container by 8px on every side, so that the edges overlap the margin created by the body tag.
The plus side is that is is applied only to that element rather than all elements.
However the downfall is also that it is only applied to the particular element - you are going to have to add -8px margin to every direct child of the body, e.g. either wrap every page in such an element, or in cases where you don't have (or want) a wrapper, you will have to add to individually to all children of the body tag.
Also hardcoding values such as -8px is less flexible, should anything change in the future from the browser settings (very unlikely), for customised or uncommon browsers with the non-default 8px (unlikely), to having an additional container in your HTML with different settings (quite possible)

A more consistent, more reusable and less intrusive way than the above is:

body {margin: 0; } to simply remove the margin directly from the body - you are directly targeting the element that is causing the problem, and only targeting that element. You don't need to change any of your own elements that could vary from page to page (or site to site!)

Working Example:

body { margin:0;}

<div style="margin:0px ; padding:0px; background-color:Grey">
<h1 style=" color:Orange ; text-align:center" id="title">Product Survey Form</h1>
</div>
<p style="color:blue ; text-align:center" id="description">After your every purchase from Serex technologies , we like to have a survey from <br> our customers in order to improves our services </p> 
<form id="survey-form" style="text-align:center">
   <label for="name" id="name-label">Name:</label>
  <input type="text" id="name" placeholder="First Name" required>
  <br>
<br>
   <label for="email" id="email-label">E-mail:</label>
  <input type="email" id="email" placeholder="Email" required>
  <br>
  <br>
   <label for="number" id="number-label">Age:</label>
  <input type="number" id="number" min="00" max="200" placeholder="Age">
  <br><br>
  <label for="dropdown" id="number-label">Gender:</label>
  <input list="dropdown" placeholder="Choose">
  <datalist id="dropdown">
   <option value="Male">
   <option value="Female">
   <option value="Others">
     </datalist>
  <p>What do you think about our service?</p>
  
     <label for="Excellent"> 
  <input id="Excellent" value="Excellent" type="radio" name="reviews">Excellent</label>
    <label for="ItsOkay!"> 
  <input id="ItsOkay!" value="Its Okay!" type="radio" name="reviews">Its Okay!</label>
     <label for="Hastobeimproved!"> 
  <input id="Hastobeimproved!" value="Has to be improved!" type="radio" name="reviews">Has to be improved!</label>
  <br><br>
  <p>Where have you heard about us?</p>
    <label><input type="checkbox" value="Newspapers " name="adverts"> Newspapers</label>
  <label><input type="checkbox" value="Relatives" name="adverts"> Relatives</label>
  <label><input type="checkbox" value="Television"name="adverts"> Television</label>
  <p>Additional Comments : </p>
  <textarea id="w3review" name="w3review" rows="4" cols="50" placeholder="Enter text here">
     </textarea>
  <br><br>
  <button type="submit" id="submit">Submit</button>
   </form>

Thanks a lot! I understand now! Also why its not convenient to use * selector for the body (Someone mentioned its good practice another person replied its a bad practice) — , Sep 05 '20 at 20:08

score 0 · Answer 2 · answered Sep 05 '20 at 14:00

0

We can simply set the margin to zero (0) to get rid of the default margin of the 'body' tag...

body{
 margin: 0;
}

answered Sep 05 '20 at 14:00

Ved Prakash

25
3

score -1 · Answer 3 · answered Sep 05 '20 at 12:34

-1

Add this to the head of your html

<style>
*{
  margin: 0;
}
</style>

This is a good practice, as this get's rid of any default margin that's present in browsers.

answered Sep 05 '20 at 12:34

Adil Ahmed

395
1
11

This is very bad practice, You should never do this using a * selector. This is how you reset default css https://css-tricks.com/reboot-resets-reasoning/ – dantheman Sep 05 '20 at 12:38
Oh. I have always used the ```* {margin: 0; padding: 0; box-sizing: border-box}``` to get rid of any preset styles, and seems to have worked fine for me. Noticed, almost everyone uses the same. I don't know if there are any side-effects to this though. Thank you for reminding, by the way. :D – Adil Ahmed Sep 05 '20 at 12:41

How to make the background color of the header fill the entire width for a header,div etc?

3 Answers3