CODEWITHSUNDEEP
htmlcss
John John
John John

Reputation: 1

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:-

enter image description here

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:-

enter image description here

so can anyone advice on this please? Thanks

Upvotes: 1

Views: 184

Answers (3)

Maik Lowrey
Maik Lowrey

Reputation: 17566

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>

Upvotes: 2

Amini
Amini

Reputation: 1792

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>

Upvotes: 1

Lucas Maracaipe
Lucas Maracaipe

Reputation: 307

You can add padding to your css:

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

Upvotes: 1

Related Questions