CODEWITHSUNDEEP
jqueryhtmlcss
user2969934
user2969934

Reputation: 79

Padding on each line of an inline element

I have a h3 element width a background color that breaks on two lines. I would like for it to have some space between the lines, so I have done this by displaying the element as inline and give it a higher line-height than the font size. Now i would like to know if there is any way to get some padding before the first and after the last word on each line?

<div class="wrapper">
<h3>Lorem ipsum dolor sit amet consectetur adipiscing elit<h3>
</div>

.wrapper{
   width: 500px;
}

h3{
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
}

In this codepen that would be before "Lorem" and "consectetur" and after "amet" and "elit"

http://codepen.io/anon/pen/rVxYbL

Upvotes: 2

Views: 266

Answers (4)

Rahul Saxena
Rahul Saxena

Reputation: 465

h3{
padding-left:10px;
padding-right: 10px;
}

Or you may also use padding: 0px 10px 0px 10px;

Upvotes: -1

Fabrizio Mazzoni
Fabrizio Mazzoni

Reputation: 1909

Add another div.

<div class="wrapper">
  <div>
      <h3>Lorem ipsum dolor sit amet consectetur adipiscing elit<h3>
  </div>
</div>

<style>
.wrapper{
  width: 500px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>

Upvotes: -1

dfsq
dfsq

Reputation: 193261

This is tricky problem which has been trouble developers for years. There are number of tricks which you can try, they are described in this CSS-tricks article.

The one I found particularly useful for myself is using box-shadow to emulate padding. In your case you can try something like this:

.wrapper {
  width: 500px;
  padding: 0 10px;
}

h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}
<div class="wrapper">
    <h3>Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
</div>

Those hacks will be needed until CSS property box-decoration-break: clone is widely supported. At the time of writing, it will work only in Firefox and Webkit browsers:

h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Upvotes: 1

marsh
marsh

Reputation: 1441

You can achieve it by adding box-shadow:

h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}

DEMO

More information you can find in this article css-tricks

Upvotes: 2

Related Questions