Removing the skipped line above an unordered list

Question

How can I remove the skipped line that always occurs above an html list? For example, in the code below, I have a line of text that describes the list, followed by the list itself. There is an unsightly blank line after the description and before the first item on the list. How can I change the code below so that the first list item is immediately below the description?

Description of list:

First item.
Second item.
Third item.

Here is the code that needs to be changed:

<i>Description of list:</i>
<ul>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
</ul>

http://stackoverflow.com/questions/27618000/why-ul-adds-extra-top-margin has your answer. — codyogden, Apr 21 '15 at 18:33

score 4 · Accepted Answer · answered Apr 21 '15 at 18:30

4

I am not sure if i am understand this correctly but check out this fiddle

The browser puts in default margin on the top and bottom of a UL so you could remove the margin using...

ul{margin-top: 0;}

answered Apr 21 '15 at 18:30

Travis

2,185
7
27
42

You were the first one with the correct answer. Thank you and +1. The stack overflow gods won't let me accept an answer for another 5 minutes. – CodeMed Apr 21 '15 at 18:36
LOL the stackoverflow gods hate that rule, But Glad it is working for ya, Cheers! – Travis Apr 21 '15 at 18:47

score 3 · Answer 2 · answered Apr 21 '15 at 18:31

3

It's the default margin at the top of the list. You can remove -- or reduce -- it with CSS.

ul {
  margin-top: 0;
}

<i>Description of list:</i>
<ul>
  <li>First item.</li>
  <li>Second item.</li>
  <li>Third item.</li>
</ul>

answered Apr 21 '15 at 18:31

Paul Roub

36,322
27
84
93

score 1 · Answer 3 · answered Apr 21 '15 at 18:37

1

provide an id to the element 'ul' and then move up the elements using margin-top

DEMO :http://jsfiddle.net/oc8mdc2s/2/

<i >Description of list:</i>
<ul id="listing">
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
</ul>



#listing{
    margin-top:-0.01%;
}

answered Apr 21 '15 at 18:37

Shelly

355
1
7

Thank you and +1 for taking the time to add a different insight. But I tried your code and it does not work in the unique setting in which the code is run. I am inserting the html into a web site not unlike stack overflow (but run by a different company). Most of my other html formatting works in that environment, but the blank line above each list is retained no matter what formatting I have tried so far. – CodeMed Apr 21 '15 at 20:47

Nilesh Mahajan · Answer 4 · 2015-04-21T18:45:14.063

0

to remove space between description and List item you will need to reset Un ordered List item properties

CSS

ul {
  padding:0;
  margin:0;
}

above code will reset default browser properties which are getting applied to Un ordered list item.

edited Apr 21 '15 at 18:45

answered Apr 21 '15 at 18:33

Nilesh Mahajan

3,506
21
34

_“applied to Un ordered list item”_: not to the _items_, but to the list itself. – Sebastian Simon Apr 21 '15 at 18:40

score 0 · Answer 5 · answered Apr 21 '15 at 18:34

0

You should consider reading about reseting css styles and default values for each tag. In your example you can try do it with

ul {margin:0;}

or just reseting one of margins.

answered Apr 21 '15 at 18:34

maque

676
1
6
11

score 0 · Answer 6 · answered Jun 17 '22 at 14:20

In my case I didn't have existing CSS files when modifying some internal documentation, so I struggled to implement the other answers. A quick html-only fix is to put the following:

<style>ul{margin-top:0;}</style>

somewhere just inside the head element:

<head>
:
</head>

at the top of the html file.

Removing the skipped line above an unordered list

6 Answers6