How to properly space the letters in a side-page button

Question

I want to put a button that is fixed on the right hand side of my webpage however as it stands right now, there is too much spacing between each letter.

Here is my html

<i class="style-switcher-btn">B
l
o
g
</i>

And this is the css class I am using:

i.style-switcher-btn {
   right: 0;
   top: 60px;
   color: #fff;
   font-size: 18px;
   cursor: pointer;
   z-index: 555555;
   position: fixed;
   padding: 7px 19px;
   background: #585f69;
   border-radius: 6px 0 0 6px !important;  
   white-space: pre;
}

The letters are too spaced out as of right now and I would like them to be more compact... Any suggestions?

Answer 1

Just add line-height: 17px; to your CSS. Or whatever number is best for your needs

i.style-switcher-btn {
    right: 0;
    top: 60px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 555555;
    position: fixed;
    padding: 7px 19px;
    background: #585f69;
    border-radius: 6px 0 0 6px !important;
    white-space: pre;
    line-height: 17px;//ADD THIS
}

DEMO

Answer 2

Not 100% sure what you're asking but play around with letter spacing:

   i.style-switcher-btn {
       right: 0;
       top: 60px;
       color: #fff;
       font-size: 18px;
       cursor: pointer;
       z-index: 555555;
       position: fixed;
       padding: 7px 19px;
       background: #585f69;
       border-radius: 6px 0 0 6px !important;  
       white-space: pre;
        letter-spacing: 2px;
    }