Цвет фона для H3 расширяется больше, чем содержание

Question

У меня есть тег, где я добавил Css для него как

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

но цвет фона распространяется на всю строку строки и не ограничивает содержимое. Как решить эту проблему?

Answer 1

Я подумал, что могу рассказать вам, почему это происходит, поскольку эта информация может пригодиться в будущем.

Элемент "h3" является блочным элементом. Это означает, что он, как правило, будет занимать целую «строку».

Причина, по которой элемент «span» (например) ведет себя по-разному, заключается в том, что он является «встроенным» элементом, что означает, что он займет «достаточно» места.

Есть два решения, которые уже могут помочь, вы также можете установить

display: inline;

На элементе h3, но это также изменит другое поведение.

Answer 2

Самое простое, что нужно сделать, это поместить текст внутри диапазона и поместить цвет фона на диапазон:

  #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>

Это позволит установить цвет фона только вокруг текста. Если вы действительно хотите сжать элемент h3, вы можете либо установить для него ширину (хотя текст будет переноситься, если он длиннее ширины), либо сделать его встроенным элементом (хотя при таком подходе есть и другие недостатки).

Answer 3

Попробуйте установить width для этого:

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

Вы также можете установить width для #jsn-maincontent_inner, если его еще нет:

#jsn-maincontent_inner
{
   width:600px;
}