title: How to bring two arrows together towards the number?
body: <p>I have a system that people can up/down vote. I have two arrows, and between the arrows there's a number. Just like Stack OVerflow and Reddit. Only problem is my arrows are too far apart from the number. I tried padding/height/ every thing I could think of but none of them works. They are all in a table, so if I mess up the whole table size gets messed up. Here's my full code. </p>
  
  <pre><code>&lt;table class="table"&gt;
      {% if posts %}
        {% for post in posts %}
          &lt;tr id="cell"&gt;
            &lt;td class="vert-align"&gt;
            &lt;div&gt;
              &lt;a href="/post/{{ post.slug }}/vote?is_up=1" class="vote"&gt;
    &lt;span class="glyphicon glyphicon-triangle-top" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;br /&gt;
  
  &lt;span class="number" style="height:1px; font-family: 'Passion One', cursive;
  "&gt;&lt;h4 id="vote_count_{{ post.slug }}"&gt;{{ post.get_vote_count }}&lt;/h4&gt;&lt;/span&gt;     &lt;br&gt;
  
  &lt;a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote"&gt;
  &lt;span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
            &lt;/td&gt;
  </code></pre>
  
  <p>I have more cells below. </p>
  
  <p>this is my css. </p>
  
  <pre><code>.table #cell .vert-align a .glyphicon{
    font-size: 1em;
    display:inline-block;
    padding: 0em;
  }
  h4{
    font-size: 15px;
  }
  </code></pre>
  
  <p>Also if anyone can tell me what's wrong with my js file I would be appreciated. I'm trying to make when user clicks the arrow the arrow to change the color and stay changed untill I click that arrow or the other arrow. sorry if it doesn't make sense I'm trying to make it (like stack-overflow and reddit) right now, when I click the arrow it changes the color but as soon as I click something else, like an empty space on my web the color gets changed. </p>
  
  <pre><code>function vote(node) {
      var thread_id = node.attr("href").split('\/')[2];
      $.ajax({
          url: node.attr("href"),
          dataType: "json",
          success: function(data) {
              $("#vote_count_"+thread_id).html(data.count);
          },
          error: function(data) {
              alert(data.responseJSON.error_message);
          }
      });
  }
  
  $("a.vote").on("click", function() {
      vote($(this));
      return false;
  });
  </code></pre>