Show free space at the begining and the end of a text inside a span

I have the following markup to show a span with background-color : lightgrey and color : darkgrey :–

<span class="singleNews__content__info__label">Business News</span>


.singleNews__content__info__label{
    text-transform: uppercase;
    background-color: #d9d9d9;
    color: #5f5f5f;
    text-align: center;}

here is the result:-

but i am trying to get this result where there will be some free space at the beginning and at the end of the text:-

so can anyone advice on this please?
Thanks

>Solution :

With padding-left and padding-right you can add space before and after the word. Also with -top and -bottom you can add on the y-direction space.

.paddTheSpan {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.singleNews__content__info__label{
    text-transform: uppercase;
    background-color: #d9d9d9;
    color: #5f5f5f;
    text-align: center;
}

<span class="singleNews__content__info__label paddTheSpan">Business News</span>