Why adds extra top margin?

by

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

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. Fill in text in HTML5
  3. Change text-color on div :hover [closed]
  4. CSS customized scroll bar in div
  5. How to place two divs next to each other?
  6. Why does height 100% work when DOCTYPE is removed?
  7. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  8. Changing three.js background to transparent or other color
  9. Actual table Vs. Div table
  10. What is the current state of the “scoped” attribute for the style element in HTML5?
  11. Proper way to apply CSS to HTML5 custom elements
  12. Add a text suffix to
  13. html5 vertical spacing issue with
  14. Adjacent divs with angled borders? [duplicate]
  15. How to position a div in the middle of the screen when the page is bigger than the screen
  16. How to write a caption under an image?
  17. Using background-attachment:fixed in safari on the ipad
  18. Overflow to left instead of right
  19. HTML / CSS Popup div on text click [closed]
  20. Custom tags… why not?
  21. CSS: How to align vertically a “label” and “input” inside a “div”?
  22. Align text to the bottom of a div
  23. Full background image with fade effect
  24. Why box-sizing is not working with width/height attribute on canvas element?
  25. How do I make text bold in HTML?
  26. Center fixed div with dynamic width (CSS)
  27. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  28. overflow: hidden on div and body, different behavior
  29. Stacking DIVs on top of each other?
  30. CSS word-wrapping in div

Leave a Comment