Why am I getting default margin even though i haven't set any?

Question

I have set class mainBackground to a div. Even though I have set only background color, I'm getting a margin gap from the chrome window from all the sides. My code is as below:

     .mainBackground {
            background-color: #ece8e8;
            width: 100%;
        }

    <div class="mainBackground">
        hello
    </div>

I want to remove the margin gap of that div tag.

have a look here: https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements — A. Meshu, Jul 04 '19 at 06:32

score 2 · Accepted Answer · answered Jul 04 '19 at 06:37

* {
  margin: 0;
  padding: 0;
}
.mainBackground {
  background-color: #ece8e8;
  width: 100%;
  padding: 100px 0;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="mainBackground">
    hello
</div>
</body>
</html>

Give margin: 0; and padding: 0 for every element! Hope it'll help

score 0 · Answer 2 · answered Jul 04 '19 at 06:34

It's because each browser has its own styles. If you want to remove it you have 2 solutions how to do it.

First solution sets margin and padding to every element 0

* {
 margin: 0;
 padding: 0;
}

Second solution sets margin and padding to element/class/id

body, div{ 
     margin: 0;
     padding: 0;
}

score 0 · Answer 3 · answered Jul 04 '19 at 06:43

As mentioned before, every browser has its "own view" of things. Each browser has its own defined preset for styles. To bypass the own interpretation, it is recommended to use a reset-css.

An example of what this might look like can be found in the following code excerpt

Source

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

score -1 · Answer 4 · answered Jul 04 '19 at 06:34

Every browser has default styles for every Element. It defines for example a standard font-size for everything. And it also defines some standard spacing for elements. So if you write a page with only HTML and don't add any CSS it will still be read- and understandable.

If you don't want to have these default styles you have to override them with your own styles.

One common way remove unwanted spacing is to set it to 0 on all elements:

* { margin: 0; padding: 0} //you can also just define all elements you want here instead of star-selector

You can also use some reset.css

Why am I getting default margin even though i haven't set any?

4 Answers4