Question

I would like to achieve this presentation:

The title with the red background is an H1 element. Currently, I achieve this presentation with this HTML code:

<h1><em>Some title</em></h1>

So, I wrap the title in an EM element (which is an inline element) and then style that element.

Live demo: http://jsfiddle.net/jZeVw/

This works but I would be happier if I weren’t forced to use such a proxy element to style my H1 title. So, I would like to have this HTML code:

<h1>Some title</h1>

and the above presentation should be achieved with CSS alone. Can that be done?

Important: There must exist a 3px padding to the left and right sides od the title text and this space must be filled with the desired background color (red, in this case).

Also, the solution is not required to work in IE8 or other backward browsers. I’m fine if it works in the latest Firefox, Chrome, Safari…

---

Disclaimer: As it so often goes, I’ve found a solution to my question while I was writing the question (I’s a bit of a hack). But I’m still posting this – I would like to see your ideas… 🙂

Answer 1

How about this: http://jsfiddle.net/jZeVw/1/

i.e: Just put h1 as display: inline-block;