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.

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