Useful CSS Tip for Beginners – Set Internal Spacing For <ul> <li>

For <ul> <li> we need to adjust spacing between the bullet and the text. So I write CSS for ul li but when I want to edit those properties, it’s a bit confusing which property is being used and where. In order to explain this I have a small demonstration using below image that will help you understand CSS properties used in the following example.

For <ul><li>we need to adjust spacing between the bullet and the text. So I write CSS for ul li but when I want to edit those properties, it’s a bit confusing which property is being used and where. In order to explain  this I have a small demonstration using below image that will help you understand CSS properties used in the following example.

CSS-ul li bullet

A : Distance between text and the bullet i.e. padding-left for li.

B : Bottom distance between two li items i.e. margin-bottom for li.

C, D : Vertical and Horizontal position of a bullet i.e. background-position: x y.

E : margin-left of ul.

HTML Code

<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>

CSS Code

ul {
margin-left: 20px;                                    /*  E */
padding-left: 0px;
list-style:none;
}

li {
padding-left: 30px;                               /*  A */
margin-bottom: 10px;                           /*  B*/
background:url(bullet.png) no-repeat 2px 8px;       /*  C,D  */
}

Do drop in your views

4 Comments

Jagan Mangat December 17, 2010

Its good and interesting,it works for drop down menus.Author you could have provided its usage and more related to its working.

Huzaifa Darbar December 18, 2010

Actually its not meant for drop down menus, this is just to remember the exact position of the ul li’s margin, padding properties, where it is being used.

sivateja December 18, 2010

Actually just ok..,

Would be better if you give some more…, this is vertical and what about horizontal.

Just saying.., current one is good you done good job. would be better if you give all the probabulities.

Huzaifa Darbar December 18, 2010

There are both vertical and horizontal-A,D,E is for horizontal and B,C is for vertical.