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

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即可：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

强大的方法是使span元素成为内联块，以便在其上设置宽度和高度设置。您可以将框的大小设置为您想要的大小，但自然的方法是使其与行高（文本基线之间的距离）匹配，因此请考虑明确设置行高。你可能希望这个字母水平居中，所以在它上面设置text-align: 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

尝试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>

Answer 4

或者你可以使用 .angulair span{display:inline-block; width:200px;} 然后你可以定义范围的宽度

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