Padding For Two-lined Headline

That is a little bit hard to explain, if someone knows a better title for this, please go ahead and change it. I want to draw a black box behind my headline. I'm doing this with a

Solution 1:

I'm assuming you WANT it to split to "two dark lines" in that fashion? Because if you just want a black background to your titles, that DOES retain the padding, then this simplified version will work:

<h1 class="entry-title">Some very, very long headline, that is very, very long.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

Updated Fiddle: http://jsfiddle.net/kWgD2/

Solution 2:

This is the closest I can get...really hacky, I think you'll need some JS myself :(

This via:

<h1 class="entry-title"><span id="Title"><span>Some very, very long headline, that is very, very long.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

Solution 3:

What about using position:relative with a left adjustment? Prob not the best method if you're not doing the adjustments manually but at least it's a css-only solution?

Example -> http://jsfiddle.net/JnLje/358/

More info from thirtydot -> Add padding at the beginning and end of each line of text

Solution 4:

you should set padding on h1 and/or set span as inline-block http://jsfiddle.net/832u8/9/( span inline-block)

h1span {
        background: none repeat scroll 00#000000;
        line-height:44px;
        padding:7px25px8px25px;
        display:inline-block;
    }

http://jsfiddle.net/832u8/3/(padding h1)

.headline-blackh1 {
    color: #FFFFFF;
    font-size: 22px;
padding:01em;
}

Solution 5:

I recently found another sollution. It works in almost every browser (No IE8 and down), is easily adjustable and looks like this:

HTML

<h1><spanclass="wrap"><spanclass="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span></span></h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px0010px#000, 10px0010px#000;
}

.inner {
    background: #000;
    position:relative;
}