Puneet Purohit
Puneet Purohit

Reputation: 1281

remove padding in html list

I have added an unordered list inside a div and I have removed its bullets. Now I want to remove space between the div and list so that the list can be shifted to left corner. Can anyone suggest me how to remove left space/gap between list and the div. Thanks

                    <div class="divLeftPanel">
                    <div>
                        <ul>
                            <li>Location</li>
                            <li>Bangalore</li>
                            <li><br/></li>
                            <li>Work area</li>
                            <li>IT</li>
                            <li><br/></li>
                            <li>Employment type</li>
                            <li>Regular full time</li>
                            <li><br/></li>
                        </ul>
                    </div>
                </div>

And here is my css

.divLeftPanel{
   float: left; 
   height: 100%;
   width:30%;
   padding-left: 0px;
}
ul
{
    font-style: italic;
    font-weight: bold;
    list-style-type: none;
    margin-left: 0px;
}

Upvotes: 2

Views: 419

Answers (3)

Puneet Purohit
Puneet Purohit

Reputation: 1281

Sorry guys. I found a solution and thanks to @sachin. I have added ul{padding:0px;} and now its working. once again thanks

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now used to this

Define your .divLeftPanle ul padding-left:0;

.divLeftPanel ul{padding-left:0;}

Demo

Upvotes: 1

Sachin
Sachin

Reputation: 40970

If you have provided padding to div then use like this

div
{
  padding-left:0px;
}

and if your list has margin from left then you can do this

#myList
{
  margin-left:0px;
}

In Simple words :

padding define the space between the element border and the element content. whereas margin define the space around elements.

EDIT: Reset css for ul like this

ul
{
    list-style:none;
    margin: 0; 
    padding: 0;
}

JS Fiddle Demo

Upvotes: 2

Related Questions