CODEWITHSUNDEEP
htmlcss
Rohan
Rohan

Reputation: 13811

How to make a span tag wider with an alphabet inside?

I am trying to work on a very simple logo.

AngulAir

HTML

<h1 class="text-center angulair"><span>A</span>ngul<span>A</span>ir</h1>

CSS

.angulair span{
        color: #fff;
        background-color: #205081;
    }

What I want is to make the A's span tags wider so that the height and th width of the blue colour is equal. I have tried adding width into the CSS but that doesn't work. How do make the span tags wider so that the blue colour is a square?

Upvotes: 2

Views: 3546

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

The robust way is to make the span element an inline block, so that your width and height settings on it will be honored. You can set the size of the box to what you want, but a natural approach is to make it match the line height (distance between baselines of text), so consider setting line height explicitly. And you probably want the letter horizontally centered, so set text-align: center on it.

.angulair {
  line-height: 1.3;
}
.angulair span {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  text-align: center;
  color: #fff;
  background-color: #205081;
}
<h1 class="text-center angulair"><span>A</span>ngul<span>A</span>ir</h1>

Upvotes: 3

Vipin Raunchhela
Vipin Raunchhela

Reputation: 193

or you can use .angulair span{display:inline-block; width:200px;} and then you can define the width of the span

.angulair span {
    color: #fff;
    background-color: #205081;
  // to Define a width of a span tag you can try the below CSS
  display:inline-block;
  width:50px;
  height:50px;
}
<h1 class="text-center angulair"><span>A</span>ngul<span>A</span>ir</h1>

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

Try display:inline-block

.angulair span {
  color: #fff;
  background-color: #205081;
  display:inline-block;
}
<h1 class="text-center angulair"><span>A</span>ngul<span>A</span>ir</h1>

Upvotes: 1

Vucko
Vucko

Reputation: 20844

Well, just using padding is enough:

.angulair span {
    color: #fff;
    background-color: #205081;
    padding:10px 16px;
}
<h1 class="text-center angulair"><span>A</span>ngul<span>A</span>ir</h1>

Upvotes: 5

Related Questions