html - CSS - 跨度 bg-color 与文本高度相同

Question

p {
  font-size: 60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>

<p>Hill <span class="bg-primary text-light">Side</span></p>

我希望 span 标签的高度与边 text 的高度相同，这可能吗？

Answer 1

您可以将 span.bg-primary 元素设置为 display as inline-block，然后您可以使用 行高

.bg-primary {
    line-height: 43px;
    display: inline-block;
}

p {
  font-size: 60px;
}
.bg-primary {
    line-height: 43px;
    display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>

<p>Hill <span class="bg-primary text-light">Side</span></p>