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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can add padding to your css:

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

CodePudding user response：

This is a simple question that you can achieve answer by putting in some effort. You have to use box-model to apply spacing on elements using Margin & Padding.

.singleNews__content__info__label {
  text-transform: uppercase;
  background-color: #d9d9d9;
  color: #5f5f5f;
  text-align: center;
  /* HERE */
  padding: 10px 20px
}

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>