CODEWITHSUNDEEP
html
Mohamed Arifkhan A
Mohamed Arifkhan A

Reputation: 55

Space Between Unordered Lists

How to reduce the space between unordered list items in html?. I tried with margin and padding as zero.But it is not working. Help me to solve this.

Eg:

    <UL>
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>   
    </UL>

    <UL>
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>
    </UL>

    <UL>
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>    
    </UL>

Upvotes: 1

Views: 4111

Answers (6)

Mukul Kant
Mukul Kant

Reputation: 7122

You can use line-height

Update: you need to make margin:0 (you can adjust margin value according you.)

ul{margin:0}
li{line-height:13px}
<UL>
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>   
    </UL>

    <UL>
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>
    </UL>

    <UL>
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>    
    </UL>

Upvotes: 2

bprasanna
bprasanna

Reputation: 2453

You can control the space with line-height. Between, ULs you can set margin:0 to reduce the space.

    <UL style="line-height:0.8;margin:0">
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>   
    </UL>

    <UL style="line-height:1;margin:0">
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>
    </UL>

    <UL style="line-height:1.8;margin:0.5em">
    <LI>ONE</LI>
    <LI>TWO</LI>
    <LI>THREE</LI>
    <LI>FOUR</LI>
    <LI>FIVE</LI>    
    </UL>

Upvotes: 1

user3497034
user3497034

Reputation:

You can use the following code.Add code in the CSS part. It will help you.

CSS

 li {  line-height:11px; }
   ul{margin:0px;}

Upvotes: 0

Arpita
Arpita

Reputation: 1398

add following in your style sheet

Style

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

Upvotes: 0

Rosenan
Rosenan

Reputation: 42

You can use this, but never use negative values. Because some browsers doesn's accept tp 

   ul {
      margin: 1px;
    }

Upvotes: 0

Domain
Domain

Reputation: 11808

First reset your css.
You can reduce the spacing by using negative value.

ul li {
  margin: -5px;
}

But its not recommended as per standard, to be used only on specific conditions.

Upvotes: 0

Related Questions