Remove space between html list item

Asked

Viewed 7,113 times

3

I have the following list:

li {
  display: inline-block;
  padding: 20px;
  background: red;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

How do I paste the list items without having to put a negative margin?

html css

3 answers

7


This spacing occurs because the elements with inline-block causes normal line or space break spacings to affect rendering, as this is the expected effect of the properties they use inline (as inline-block and inline-table)

To fix you can use float:; and clear with a "pseudo element" (::after):

.itens {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  float: left;
  padding: 20px;
  background: red;
}

.itens::after {
  clear:both;
  content: "";
  display: block;
}
<ul class="itens">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Or define the font-size as 0 in the ul:

.itens {
  font-size: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  display: inline-block;
  padding: 20px;
  background: red;
  font-size: 11pt;
}
<ul class="itens">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

To see how the line breaks that affect remove any space between the Lis:

.itens {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  display: inline-block;
  padding: 20px;
  background: red;
  font-size: 11pt;
}
<ul class="itens">
  <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

  • Very good your answer friend, solved my problem, thank you.

  • @Laérciolopes please mark as correct the answer you like best, how to accept: http://meta.pt.stackoverflow.com/q/1078/3635

  • Macado, thank you had not done this before...

4

Another suggestion is to use HTML comments between LI's to be well-bred.

.itens {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.itens > li {
  display: inline-block;
  padding: 20px;
  background: red;
  font-size: 11pt;
}
<ul class="itens">
     <li>Item 1</li><!--
  --><li>Item 2</li><!--
  --><li>Item 3</li>
</ul>

  • Thanks for the tip buddy, this helps to make the code readable.

-3

<head>
 <style>
    .itens {
        list-style: none;
        margin-left:-5%;
    }
    </style>
</head>

<body>

<ul class="itens">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
</ul>

</body>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.