Menu
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.
If I add "margin-top : 0;" to the the space is gone...but I I'm not happy until I understand why.
239
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
All replies. Hi, Simply set padding:0px to ul will remove the indent.
The <ul> and <ol> elements have a top and bottom margin of 16px ( 1em ) and a padding-left of 40px ( 2.5em ). The list items ( <li> elements) have no set defaults for spacing.
The margin-top property is used to specify the width of the top area of the element's margin box. That is, it specifies the area of space required at the top of the element, outside any defined border. Every element on a web page is rectangular.
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.
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
119
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.
21
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
4
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
