Our very own internet page
<http://www.foodsupplementcenter.com

Your solution (using the border of a surrounding div to create fake padding) only creates background padding where the text aligns (in your example, on the left). On the right, the background is cut very tight to the characters.

using box-shadow saves you a div, and adds the padding on both sides of the line as well….

Works in most modern browsers IE9+

p {
padding:5px 0;
color:#fff;
font-size: 18px;
display: inline;
background-color:red;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red;
left:10px;
position: relative;
}

p {
padding:5px 0;
color:#fff;
font-size: 18px;
display: inline;
background-color:red;
box-shadow: 12px 0 0 0 red, -12px 0 0 0 red;
left:10px;
position: relative;
}

These days background color for inline text is often used on websites. Especialy on newspaper websites.