CODEWITHSUNDEEP
csshtml-lists
TheOnlyIdiot
TheOnlyIdiot

Reputation: 1202

CSS : How to remove margin between <li>

I created tabs using <li>. I used css to add style but the problem is, there is a space between tabs. I tried to add margin: 0px; in ul.tabs li but the spaces are still there.

Please see the link http://jsfiddle.net/cfv65agn/

Thanks.

Upvotes: 0

Views: 4409

Answers (5)

Fiddles
Fiddles

Reputation: 2916

display: inline-block will honour white-space between them. Simply delete the tabs an spaces between your li's. The will unfortunately make your code slightly less readable, but you can more or less compensate by putting a line break within the li, at the end.

Upvotes: 1

chathux
chathux

Reputation: 831

probably it is because you have set display:inline-block in ul.tabs li. changing it to float:leftwill fix this. this usually happens when there is a \n between inline-block elements

Upvotes: 1

jhawes
jhawes

Reputation: 2374

Adding float: left to your ul and li will fix it too (make ul 100% width as well):

CSS

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
    float: left;
}
ul.tabs li {
    background: #ffffff;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border-top-right-radius: 1em;
    border-top-left-radius: 1em;
    border: 1px solid #afafaf;
    margin : 0px;
    float: left;
}

Here's a jsFiddle

Upvotes: 1

Sara Mote
Sara Mote

Reputation: 236

A straightforward fix is to set the font size of your ul with the class "tabs" to 0, and set the proper font size on the list items directly.

This will remove the default spacing between them, without the need of magical negative numbers.

I just tested, and the following works:

 ul.tabs {

   font-size: 0;

 }

 ul.tabs li {

  font-size: 16px; /* set to the font size you want */

}

Upvotes: 2

Skinner
Skinner

Reputation: 1503

Change margin in "ul.tabs li" to a negative number. -3 gets rid of them, -2 makes them real small.

Upvotes: 1

Related Questions