On Doctype itself I've styled the headings to be inline, with a background colour and padding. Unfortunately this only pads the beginning and end of each headline. Is there any way to add padding at the beginning and end of every line?

Here's the CSS I'm using to style the headings:

h1 {
  font-family: "Helvetica Neue UltraLight", Arial, Helvetica, sans-serif;
  font-weight: lighter;
  padding: 5px 7px 5px 7px;
  color: #fff;
  font-size: 32px;
  background-color: #555;
  display: inline;
  line-height: 130%;
}

4 answers

1
point
This was chosen as the best answer

I'm not sure of a way to do this in CSS, but you could have some Javascript onload that wraps a span around each line:

function padSubsequentLines(element)
{
    var words = element.innerHTML.split(' ');
    element.innerHTML = '';
    for (var i = 0; i < words.length; i++)
    {
        element.innerHTML += '<span>' + words[i] + '</span> ';
    }
    var spans = element.childNodes;
    var currentOffset = spans[0].offsetTop;
    var html = '<span class=line>';
    for (var i = 0; i < spans.length; i++)
    {
        if (spans[i].nodeType === 3)
            continue;
        if (spans[i].offsetTop > currentOffset)
        {     
            html += '</span><span class="line">';
            currentOffset = spans[i].offsetTop;
        }
       html += spans[i].innerHTML + ' ';
    }
    html += '</span>';
    element.innerHTML = html;
}

Change your h1's padding to:

padding: 5px 0;

And add a new rule:

#question_heading span.line {
    margin:0 10px;
}

Finally, add a call to pad the subsequent lines to your body onload:

<body onload="padSubsequentLines(document.getElementById('question_heading'));">
Answered over 5 years ago by Matthew Brindley
5
points

Here is a pure CSS solution that I used a few years ago - here is the HTML:

<div>
  <h1><strong>How do I add padding to subsequent lines of an inline text element?</strong></h1>
</div>

And here is the CSS:

<style type="text/css">
  div { line-height: 1.0; padding: 2px 0; border-left: 20px solid #c0c; display:inline-block; }
  h1 { background-color: #c0c; color: #fff; display: inline; margin: 0; }
  h1 strong { position: relative; left:-10px; }
</style>
<!--[if IE ]>
  <style type="text/css">
    h1 strong { padding: 0 10px 0 0 }
  </style>
<![endif]-->
Answered over 5 years ago by Matthew Pennell
2
points

@ Matthew Pennell - that is amazing! I am really very impressed, I tried to do this a little while back and didn't think of using a border and positioning the strong to the left!

I had a bit of a play with the code and tried to get rid of the 1px rounding errors, its fine in everything now except opera and safari where there is a few px error with the border. IE also cuts off the bottom of the g's but changing the lineheight seams to be pretty problematic, any ideas?

Heres what I have:

<style type="text/css">
    div { 
        line-height: 1.2; 
        padding: 1px 0; 
        border-left: 2em solid #c0c; 
        display:inline-block; 
    }
    h1 { 
        background-color: #c0c; 
        color: #fff; 
        display: inline; 
        margin: 0; 
        padding: 0.1em;
    } 
    h1 strong { 
        position: relative; 
        left: -0.5em; 
    }
</style>

<!--[if IE ]>
  <style type="text/css">
    div { 
        padding-bottom: 2px;
    }
    h1 strong { 
        padding: 0 10px 0 0;
    }
  </style>
<![endif]-->

<!--[if gte IE 8]>
  <style type="text/css">
    div { 
        padding: 2px 0;
    }
  </style>
<![endif]-->

<div>
  <h1><strong>How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element? How do I add padding to subsequent lines of an inline text element?</strong></h1>
</div>
Answered about 5 years ago by Natalie Downe
costi 0
0
points

This is a GREAT post. I had another challange: the padding on top-left-bottom-right to be the same on inline text. I have searched everywhere until I found this answer. In the example below you will get 8px around the text. My solution is:

<div class="t">
  <h1 class="tt"><strong>LOREM IPSUM DOLOR SIT AMET LECTUS DOLOR IPSUM</strong></h1>
</div>
<style type="text/css">
  div.t { font-family: Georgia, serif; font-size:20px; line-height: normal; padding: 5px 0 5px 15px; /*border-left: 22px solid #c0c; used box-shadow instead*/ display:inline-block; overflow-y: hidden; width: 350px; }
  h1.tt { background-color: #c0c; color: #fff; display: inline; margin: 0; padding: 1px 0; box-shadow: -16px 0 0 #CC00CC;  }
  h1.tt strong { position: relative; left:-9px;  }
</style>

http://jsfiddle.net/KXqyq/

Answered almost 2 years ago by costi