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.

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

Published by Huzaifa Darbar

I am a Web Designer, CSS expert and love WordPress

4 replies on “Useful CSS Tip for Beginners – Set Internal Spacing For <ul> <li>”

    1. 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.

  1. 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.

Comments are closed.