Text won't align after giving it padding

Question

I am attempting to make my site responsive, I give my heading text 15px of padding however if the text stretches onto a new line the next line doesn't get the correct padding on the left side. Is it possible to make the text align?

Here is a screenshot of the text.

Here is the CSS i'm using.

.article_title {

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

and my html element is

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

Answer 1

Just change the span to div. Using a span while forcing it to be a block element is counter-intuitive.

Answer 2

you can just add display:table; and remove line-height for responsive layout.

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

.article_title {

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

The display:block should do the trick. Notice I have also changed the line-height to 15.

Answer 4

span is an inline element, which means the left padding is not applied to it.

Just add the display: block; to the CSS code and it should work fine.