如何使跨度标签更宽，里面有字母表？

Question

我正在尝试制作一个非常简单的标志。

超文本标记语言

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

半铸钢ˌ钢性铸铁(Cast Semi-Steel)

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

我想要的是把A的跨度标签加宽，这样蓝色的高度和宽度相等。我尝试过在CSS中添加宽度，但这不起作用。如何使跨度标签变宽，使蓝色成为正方形？

Answer 1

尝试显示：内联块

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

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

Answer 2

健壮的方法是将spa元素设为内联块，这样您对它的宽度和高度设置就会得到满足。您可以将框的大小设置为您想要的大小，但一种自然的方法是使其与行高（文本基线之间的距离）相匹配，因此请考虑显式设置行高。您可能希望字母水平居中，因此请在其上设置text-⃣： center。

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

Answer 3

好吧，只使用填充就足够了：

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

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