Spacing between two
elements

Question

I've written the folloning code:

<ul>
    <li>Text</li>
    <li>text</li>
</ul>

and styles:

list-style-type: none;
padding: 5px;
display: inline;
background-color: #A9A9A9;

But i have spacing between two li elements like the following:

enter image description here

How can I remove this spacing?

http://css-tricks.com/fighting-the-space-between-inline-block-elements/ This url clearly explain how to remove space in between them. — Gunaseelan, Mar 27 '14 at 07:52
possible duplicate of [Best way to manage whitespace between inline list items](http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items) — Gunaseelan, Mar 27 '14 at 07:54

score 3 · Answer 1 · answered Mar 27 '14 at 07:49

3

By put them inline

<ul>
    <li>Text</li><li>text</li>
</ul>

Js Fiddle Demo

answered Mar 27 '14 at 07:49

Sachin

40,216
7
90
102

score 3 · Answer 2 · answered Mar 27 '14 at 07:49

3

If you float your li items, it should remove the margin between li output.

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>


ul {
    list-style-type: none;
}

ul li {
    float:left;
    padding: 5px;
    display: block;
    background-color: #A9A9A9;
}

answered Mar 27 '14 at 07:49

classicjonesynz

4,012
5
38
78

You don't need `display: block;` when you use `float` also you haven't cleared them – Mr. Alien Mar 27 '14 at 07:53
to clear the float you need to put a class with `clear:both` on the end. `
` or `
` :) – Mr. iC Mar 27 '14 at 08:00

score 1 · Answer 3 · answered Mar 27 '14 at 07:54

Here are two common ways to avoid the space:

<ul>
  <li>
  one</li><li> <!-- use this to avoid the linebreak -->
  two</li><li>
  three</li>
</ul>

Or you can use Comments:

<ul>
  <li>one</li><!--
  --><li>two</li><!-- Comments so there is no white-space
  --><li>three</li>
</ul>

You can check it in this Demo

You get the space because there is some space between the elements. (Tabs, Newline count as space ). With this Minimized HTML it should work :)

You can read more about it here Examples at CSS-Tricks

Ravi Patel · Answer 4 · 2014-03-27T08:00:17.107

0

Just Add float:left in your Css

ul li {
   background-color: #A9A9A9;
   display: inline;
   float: left;
   padding: 5px;
}

Demo

edited Mar 27 '14 at 08:00

answered Mar 27 '14 at 07:52

Ravi Patel

5,121
2
25
44

Kheema Pandey · Answer 5 · 2014-03-27T08:03:52.247

0

There are many ways as mentioned above few of them..however you can achieve with another method. using font-size:0

ul
{font-size:0; /*This will remove the space totally*/
list-style-type: none;
} 

li{
padding: 5px;
display: inline;
background-color: #A9A9A9;
font-size:16px; /*This is important line so the font come again in same shape*/
}

Here is the Demo.

edited Mar 27 '14 at 08:03

answered Mar 27 '14 at 07:53

Kheema Pandey

9,977
4
25
26

If my example works for you. Then you may close this question by accepting this answer. – Kheema Pandey Mar 27 '14 at 09:34

score 0 · Answer 6 · answered Mar 27 '14 at 07:59

0

try floats and use list-style-type for ul:

ul {
  list-style-type: none;
}
li {
  padding: 5px;
  float:left;
  background-color: #A9A9A9;
}

answered Mar 27 '14 at 07:59

dima

1,181
1
9
20

Spacing between two elements

6 Answers6

Spacing between two
elements