如何使用字母表内部更宽的标签？

Question

我正在努力研究一个非常简单的徽标.

HTML

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

CSS

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

我想要的是使A的跨度标签更宽,使蓝色的高度和宽度相等.我已经尝试在CSS中添加宽度,但这不起作用.如何使span标签更宽,使蓝色为正方形？

Answer 1

好吧,只需使用padding就足够了:

.angulair span {
    color: #fff;
    background-color: #205081;
    padding:10px 16px;
}

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