CODEWITHSUNDEEP
csshtml
Alex
Alex

Reputation: 5904

Why <ul> adds extra top margin?

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.

Upvotes: 16

Views: 29785

Answers (9)

Hermann Schwarz
Hermann Schwarz

Reputation: 1765

Just try to use

ul {
  margin: 0px;
}

Upvotes: 0

Lexa
Lexa

Reputation: 197

<!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>

Upvotes: 0

darcher
darcher

Reputation: 3134

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

Upvotes: 5

Barun
Barun

Reputation: 4431

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

Upvotes: 0

Roumelis George
Roumelis George

Reputation: 6746

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

Upvotes: 0

ckuijjer
ckuijjer

Reputation: 13814

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

Upvotes: 7

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

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>

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

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

Check here stackoverflow

Also you can check here

Upvotes: 0

Vaibs_Cool
Vaibs_Cool

Reputation: 6150

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

Upvotes: 4

Related Questions