Problem z rotatorem

Cześć,

Mam pewien problem... Mam na stronie rotator, który zmienia tekst WOLNA/ZAJĘTA. Problem w tym, że kiedy zmieniam rozmiar czcionki, to wychodzi on poza tło po tesktem jak na zdjęciu w załączniku. W jaki sposób mogę zmienić rozmiar kolorowego tła pod tekstem ?  Z góry dziękuję. 

<div style="text-align: center ;" id="quote"></div>
  <script>
    (function() {
      var quotes = [
        {
          text: "<span style='background-color: #09ff00'><font size='5' color='white'>DOSTEPNA</font></span>",
        },
        {
         text: "<span style='background-color: #ff0000'><font size='5' color='white'>ZAJETA</font></span>",
        }
      ];
      var quote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById("quote").innerHTML =
        '<p>' + quote.text + '</p>' 
    })();
  </script>

Ciężko coś ze zdjęcia wywnioskować. Spróbuj dodać  line-height: o odpowiedniej wysokości.