给它填充后，文本不会对齐

Question

我试图使我的网站响应，我给我的标题文本15px的填充，但是如果文本延伸到新行，下一行没有在左侧获得正确的填充。是否可以使文本对齐？

以下是文字的截图。

这是我使用的CSS。

.article_title {

        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        line-height: 10px;
        color: #666;
        font-weight: bold;
        padding: 15px;
    }

我的html元素是

<span class="article_title">Building Refurbishment and Modernisation</span>

Answer 1

span是一个内联元素，这意味着左边的填充不会应用于它。

只需将display: block;添加到CSS代码中即可正常工作。

Answer 2

.article_title {

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    color: #666;
    font-weight: bold;
    padding: 15px;
    display:block
}

display：block应该可以解决问题。注意我也将行高改为15。

Answer 3

你可以添加display：table;并删除响应布局的行高。

.article_title {

        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        color: #666;
        font-weight: bold;
        padding: 15px;
        display: table;
    }

http://jsfiddle.net/oapu11q4/28/

Answer 4

只需将跨度更改为div。在强制它成为块元素的同时使用跨度是违反直觉的。