CODEWITHSUNDEEP
htmlhtml-listsmargin
hatter
hatter

Reputation: 83

HTML list margin

I'm trying to make a numbered list but I'm getting a margin on the top and the bottom between the list and some text (I'm using Firefox). When I try get rid of it with CSS, I loose the numbers and the indentation. Is it possible to get rid of the margin without loosing the numbers and list indentation?

If you use the following html:

<html>
<body>
BIG GAP V
  <ol>
    <li>hello</li>
    <li>there</li>
  </ol>
BIG GAP ^
</body>
</html>

You'll see that you get the following:

BIG GAP V
  <ol>
    <li>hello</li>
    <li>there</li>
  </ol>
BIG GAP ^

Upvotes: 0

Views: 6452

Answers (2)

Vinay Sajip
Vinay Sajip

Reputation: 99355

Ideally, if you want the best control over the layout of your HTML, you should use a reset CSS such as Eric Meyer's or the one from YUI. This removes any default formatting applied by browsers (which is often different for each browser). You can then apply the formatting (margins, padding etc.) that you want.

Upvotes: 1

Gumbo
Gumbo

Reputation: 655239

Try to change just the top and bottom margin:

ol {
    margin-top: 0;
    margin-bottom: 0;
}

Upvotes: 2

Related Questions