Background colour for H3 extendind more than the content

Question

hi,

i am having a tag where i have added a Css for it as

      #jsn-maincontent_inner h3 {
       background-color:#BBB1A5;
       color:white;
       padding:3px 8px;
      text-transform:uppercase;
       }

but the background color extends for the whole row of the line and it is not limiting upto the content . HOw to resolve this??

Answer 1

Try setting a width for that:

  #jsn-maincontent_inner h3 {
       background-color:#BBB1A5;
       color:white;
       padding:3px 8px;
       text-transform:uppercase;
       width:500px;
       }

You may also want to set the width for #jsn-maincontent_inner if it doesn't have already:

#jsn-maincontent_inner
{
   width:600px;
}

Answer 2

The easiest thing to do is to put the text inside a span and put the background color on the span:

  #jsn-maincontent_inner h3 {
    padding:3px 8px;
    text-transform:uppercase;
   }
  #jsn-maincontent_inner h3 span {
    background-color:#BBB1A5;
    color:white;
   }

<h3><span>Text here</span></h3>

This will put the background color just around the text. If you want to actually shrink the h3 element, you can either set a width for it (though text will wrap if it is longer than the width), or make it an inline element (though there are other downfalls to this approach).

Answer 3

I thought I'd chip in to tell you why this is happening as the information may be useful in the future.

The "h3" element is a block element. This means it will generally take up an entire "row" as you describe it.

The reason a "span" element (for example) behaves differently is because it is an "inline" element, which means it will take up "just enough" space.

There are two solutions already up to help, you could also set

display: inline;

On the h3 element, but this will change other behaviour too.