title: How can I fix the line-height in ordered list when the text breaks in multiple lines?
body: <p>I have an ordered list and I used the 'line-height' on order to vertically align the icon/bullet I'm using with the text on the right.</p>
  
  <p>The problem now is that when the text is long and breaks in multiple lines it's too close together and I cannot find a way to fix it.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;ul class="fancy_list"&gt;
  &lt;li&gt;Value 1&lt;/li&gt;
  &lt;li&gt;Value 2&lt;/li&gt;
  &lt;li&gt;Value 3&lt;/li&gt;
  &lt;li&gt;Value 4&lt;/li&gt;
  &lt;li&gt;Value 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and here's the CSS:</p>
  
  <pre><code>.fancy_list {
      padding-left: 15px;
      margin-bottom: 15px;
      }
  
      .fancy_list li {
      list-style: none;
      padding: 0 0 0 22px;
      margin-top: 5px;
      background: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/gbs-merchant-dashboard/img/red_sprite.png) -462px -164px repeat-y;
      line-height: 15px;
      height: 30px;
      display:block;
      float: left;
      word-spacing: 0.5px;
      letter-spacing: 0.4px;
      }
  </code></pre>
  
  <p>Also, here's a [link] to the page that actually has the issue.</p>