H3 extendind的背景颜色多于内容

Question

我有一个标签,我已经为它添加了一个Css

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

但是背景颜色延伸到整行,并且不限制内容.请问解决这个问题？

Answer 1

我以为我会告诉你为什么会发生这种情况,因为这些信息将来可能会有用.

"h3"元素是块元素.这意味着它通常会占用您描述的整个"行".

"span"元素(例如)行为不同的原因是因为它是一个"内联"元素,这意味着它将占用"足够的"空间.

有两种解决方案可以提供帮助,您也可以设置

display: inline;

在h3元素上,但这也会改变其他行为.