Why
adds extra top margin?

Question

I have a simple html page with some style in it and I do not understand why the adds some top margin?

Here is the source:

<!doctype html>
<html>

<head>
  <title></title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffcc;
    }
    #content {
      width: 900px;
      margin-left: auto;
      margin-right: auto;
      border: 0;
      background-color: #ccccff;
    }
  </style>
</head>

<body>
  <div id="content">
    <div>
      <ul>
        <li><a href="./xxx.html">xxx</a>
        </li>
        <li><a href="./yyy.html">yyy</a>
        </li>
        <li><a href="./zzzz.html">zzz</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Here is the "annoying" space.

enter image description here

If I add "margin-top : 0;" to the the space is gone...but I I'm not happy until I understand why.

@jbutler483 Mozilla 34.0.5, Chrome 39.0.2171.95 m and IE 11.0.9600.17358 — Alex, Dec 23 '14 at 10:06
@AmanRawat I saw that setting the margin to 0 it works (see my whole question) but the real question is why? — Alex, Dec 23 '14 at 10:07
It's called default styling. Much like the way a list is defaulted to have a bulleted dot before each element. — jbutler483, Dec 23 '14 at 10:08
Unordered lists were originally meant for content on the page, same as paragraph and or heading elements. They have default browser margins to apply logical whitespace in between blocks of content for easier reading. — darcher, Dec 23 '14 at 17:29

score 7 · Accepted Answer · answered Dec 23 '14 at 10:12

The margin on the <ul> comes from the default styling that a browser adds to the element. For example if you open Chrome's DevTools and inspect the <ul> element you'll see styling like this. The user agent stylesheet refers to the browsers default styling. 1em of margin becomes 16px as the browser has a font-size: 16px by default.

As the default styling isn't the same between browsers a common technique is to use a reset stylesheet, like Eric Meyer's Reset CSS or Nicolas Gallagher's normalize.css, to reduce these browser inconsistencies.

Default <code><ul></code> styling taken from Chrome's DevTools

score 4 · Answer 2 · answered Dec 23 '14 at 10:01

4

Typical Default UL styling

ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px; }

Reference

If you want plain vanilla css for your html you can few css in your stylesheet

Vanilla CSS

answered Dec 23 '14 at 10:01

Vaibs_Cool

6,126
5
28
61

`margin-before` is a new one for me – psp Nov 23 '15 at 18:10

darcher · Answer 3 · 2014-12-23T18:15:02.430

Sheesh, read the OP people.

Unordered lists were originally meant for content on the page, same as paragraph and or heading elements. They have default browser margins to apply logical whitespace in between blocks of text for easier reading.

This is a bulleted list
This is another list item
notice the spacing above and below

If it was bunched together without margins the world would combust, universe would collapse, and people would have trouble reading the content on the page, and in books, and on posters, and fast food cups, etc.

The margins applied are a standardization across all mediums. Print, web, yada. That is why it is.

Now unordered lists have been adopted into many other arenas in the web to tackle navigation, dropdowns, and a plethora of other gimmicks, which is why everyone is ranting over resets, because ul's can be used for other purposes than that which it was originally intended.

If you so choose to break away from the conventional standardization, for whatever reason, then personally I cannot recommend a reset. I do, however, approve of normalize.css, for the most part--again only use what you need but it strives to "normalize" the differences in browser default styling instead of clearing them all out completely.

What I really recommend, is you create your own styles based on your own needs. If you don't want margins on paragraphs, headings, and lists, then simply write:

ul,ol,p,h1,h2,h3{ margin-top:0; margin-bottom:0 }

It's slim, light, and doesn't require cluttered resets on elements you don't even use. Only use what you need. OR better yet, you may want to use the default margins at some point, instead try:

.no-vmargin{ margin-top:0; margin-bottom:0 }

Now any element you don't wish to have a top or bottom margin on you can apply class="no-vmargin" granted this isn't very semantic and you should probably follow a classing naming convention specific to your needs. But that's another topic entirely.

Here, I even made ya a fiddle

yeah! infact the `*{ margin: 0; padding: 0}` will cause email templates to render to left. While your solution is better. To be less intrusive it's ok just to `ul{ margin-top:0; margin-bottom:0 }`. — loretoparisi, Apr 11 '19 at 19:19

score 2 · Answer 4 · edited May 23 '17 at 11:54

as per this question Browsers' default CSS stylesheets

add *{margin:0; padding:0;} which will remove default margin and padding given by browsers

or you can also use reset.css

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background-color: #ffffcc;
}
#content {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  background-color: #ccccff;
}

<div id="content">
  <div>
    <ul>
      <li><a href="./xxx.html">xxx</a>
      </li>
      <li><a href="./yyy.html">yyy</a>
      </li>
      <li><a href="./zzzz.html">zzz</a>
      </li>
    </ul>
  </div>
</div>

the question was why is it there, not how to remove it – jbutler483 Dec 23 '14 at 10:08 — jbutler483, Dec 23 '14 at 10:08

score 0 · Answer 5 · edited May 23 '17 at 11:46

0

It should be a user agent stylesheet. Your browser puts that margin on every <ul> element.

Check here stackoverflow

Also you can check here

edited May 23 '17 at 11:46

Community

1
1

answered Dec 23 '14 at 10:02

kapantzak

11,610
4
39
61

score 0 · Answer 6 · answered Dec 23 '14 at 10:13

0

You need to reset your css or each browser uses some default css rules for some elements. Use a reset css like this normalize.css or some ui framework like bootstrap and foundation

answered Dec 23 '14 at 10:13

Roumelis George

6,602
2
16
31

score 0 · Answer 7 · answered Dec 23 '14 at 10:17

0

It's the default CSS behaviour presented by most of browsers. It has been there since the dawn of the Web.

answered Dec 23 '14 at 10:17

Barun

4,245
4
23
29

score 0 · Answer 8 · answered Jul 07 '18 at 10:05

<!doctype html>
<html>

<head>
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #ffffcc;
        }
        
        #content {
            width: 900px;
            margin-left: auto;
            margin-right: auto;
            border: 0;
            background-color: #ccccff;
        }

        #content ul {
            font-size: 0;
        }
        
        #content ul a {
        font-size: 16px;
        }
        
    </style>
</head>

<body>
<div id="content">
    <div>
        <ul>
            <li><a href="./xxx.html">xxx</a>
            </li>
            <li><a href="./yyy.html">yyy</a>
            </li>
            <li><a href="./zzzz.html">zzz</a>
            </li>
        </ul>
    </div>
</div>
</body>

</html>

score 0 · Answer 9 · answered Jul 21 '23 at 09:55

0

Just try to use

ul {
  margin: 0px;
}

answered Jul 21 '23 at 09:55

Hermann Schwarz

1,495
1
15
30

Why
adds extra top margin?

9 Answers9

Linked

Related

Why adds extra top margin?

9 Answers9

Linked

Related

Why
adds extra top margin?