Why <Ul> Adds Extra Top Margin

Why ul adds extra top margin?

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.

CSS ul is taking an extra space when trying to center it

<ul> elements come with some inherent styling in the browser. If you set padding: 0 on your <ul> in your css, you'll see that the green bar will be removed.

Does UL have default margin or padding

The problem is that by default, browsers have custom css - in chrome for example:

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

You'll have to use a custom rule for your ul:

element.style {
    margin-left: 0px;
    /* set to 0 if your not using a list-style-type */
    padding-left: 20px;
}

why does adding a list element to body add extra padding to html? CSS

This margin is added by the <ul>. Add the following to your stylesheet:

ul { margin-top: 0px; }

Updated Fiddle

I'm not sure why the <ul> has a default top margin, nor do I know which browsers do this or if it's per spec, but I think it's safe to say that if you do not want a top margin, the safest bet is to always set it explicitly and not worry about what browsers do by default.

IE adds extra top-margin to every li-element

To get the behavior your looking for try "display: inline" instead of the "float: left". Add both:

ul#mainnav { display: inline }

ul#mainnav li { display: inline }

A great resource for info on customizing lists can be found on A List Apart.

Why is this ul exceeding the size of it's div?

Did you add a zip/uni reset to the top of your css file?

* { margin:0; padding:0; }

( Put that exactly as is at the very top of CSS to override browser default margins/padding ).

Most likely the ul is being given default padding/margin, so this is to counter-act it.

CSS getting extra padding inside ul

You're forcing your first li element to be displayed 15px from the top of the ul element with a margin-top.

Take out

#filtersContent section ul li {
    margin-top: 5px;
}
#filtersContent section ul li:first-child {
    margin-top: 15px;
}

Updated CodePen

UL has margin on the left

The <ul> element has browser inherent padding & margin by default. In your case, Use

#footer ul {
    margin: 0; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
}

or a CSS browser reset ( https://cssreset.com/ ) to deal with this.

---

Related Topics