Why 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.

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

Leave a Comment