Remove space between html list item

Question

Remove space between html list item

Navigation

#1 by (6 votes)
#2 by (2 votes)

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 items in the list without having to put a margin with negative value?

html css

asked by anonymous 17.12.2016 / 16:09

2 answers

2

Another suggestion is to use comments in the HTML between LI's to be well indented.

.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>

19.12.2016 / 12:28

How to use the Icon tag in HTML? [closed] Is there any way to insert pre-defined code snippets in Visual Studio?

score 6 · Accepted Answer

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

To correct 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 set font-size to 0 in 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 affect it, 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>