CSS 行高，不起作用？

Question

试图得到一个结果来勾勒出 .outline 类的轮廓，但它的间距太近了，当我尝试在我的 .intro 类中使用以下代码时。

.intro {
    /** Text Formatting **/
    text-align: center;

    /** Line Spacing **/
    line-height: 3em;
}

如果我不使用行高，我得到的结果仍然是一样的。

HTML

<div class="intro"> <h4> In my <span class="outline">corner</span> of the internet I make messes that some how turn into code. Don't ask me <span class="outline">how</span>, don't ask me <span class="outline">corner</span>, but things just look good and work well.</h4> </div>

CSS

.outline {
     /** Styling **/
     background: #ff00f6;
     color: #FFF;

     /** Margin & Padding **/
     margin: 3px;
     padding: 6px 8px;
}

Answer 1

您提到的代码似乎工作正常。我发现一个问题，可能是您的 css 与 line-height 冲突。尝试将 !important 与 css 放在一起，如下所述:

.intro {
    /** Text Formatting **/
    text-align: center;

    /** Line Spacing **/
    line-height: 3em !important;
}

Demo