Question

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

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.