CSS : How to remove margin between

Question

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.

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Fiddles, Jan 20 '15 at 05:39

score 2 · Answer 1 · answered Jan 20 '15 at 05:02

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 */

}

score 1 · Accepted Answer · answered Jan 20 '15 at 05:00

1

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

answered Jan 20 '15 at 05:00

Skinner

1,461
4
17
27

score 1 · Answer 3 · answered Jan 20 '15 at 05:08

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

score 1 · Answer 4 · answered Jan 20 '15 at 05:10

1

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

answered Jan 20 '15 at 05:10

chathux

821
8
17

score 1 · Answer 5 · answered Jan 20 '15 at 05:15

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.

CSS : How to remove margin between

5 Answers5