aneta_bielska [:blog]

Css: removing gap between inline elements
#css

It is a common problem but it is not really intuitive how to solve it.

The problem

When using display: inline-block, enter after closing tag </li> creates a space between elements like one between words.

<ul>
  <li>e1</li>
  <li>e2</li>
  <li>e3</li>
</ul>
li {
  display: inline-block;
  background: grey;
}

Expected effect

Elements stick to each other:

Possible solutions

Possible solution would be not using inline-block at all and use float instead.

But if you really want to use it, here are some solutions.

For example you can add negative margin. It sometimes needs to be adjusted. Also it can be problematic in different browser.

li {
  display: inline-block;
  background: grey;
  margin: -4px;
}

Another clear fix is setting font-size of parent tag to zero. (Note: issues for this approach were reported on Android)

ul {
  font-size: 0;
}
li {
  font-size: 16px;
}

Other solutions are less aesthetic but still do the trick. Enters between </li><li> elements need to be removed .

<ul>
  <li>
   e1</li><li>
   e2</li><li>
   e3</li>
</ul>
<ul>
  <li>e1</li
  ><li>e2</li
  ><li>e3</li>
</ul>

or you can use comments <!-- -->

<ul>
  <li>e1</li><!--
  --><li>e2</li><!--
  --><li>e3</li>
</ul>

In html 5 you can simply skip closing tags:

<ul>
  <li>e1
  <li>e2
  <li>e3
</ul>

You may also enjoy:


#servers (1) #hosting (1) #sinatra (2) #assets (1) #sprockets (1) #react-js (1) #data-mapper (1) #ROM (1) #sequel (1) #ORM (1) #pg (1) #sqlite3 (1) #postgresql (1) #ruby (4) #ubuntu (1) #heroku (1) #git (1) #css (3) #cors (1) #same-origin-policy (1) #rake (1) #web-scraping (1) #ruby-on-rails (1) #brug (1) #elixir (1) #benchmark (1)