CSSの背景色はテキストまで拡張されますか？

Question

親の幅に拡大しないテキストの背景色を設定するにはどうすればよいですかdiv？私はh1{background color:white;}を使用し、私が望むテキストの周りにh1をラップしましたが、白い背景はテキストを超えて広がっています。それはあなたが言葉を強調表示しているようなものです。

Answer 1

h1はブロック要素なので、使用可能なすべての領域が使用されます。透明：？だけその幅

h1 { 
    display: inline; 
    background-color: white; 
} 

http://jsfiddle.net/wxNQR/

Answer 2

h1はブロックレベルの要素であり、デフォルトではブロックレベルの要素が展開されて、親要素の利用可能な幅をすべて埋めます。これを解決する最も簡単な方法は、floatに要素である

：

h1 { 
    background-color: white; 
    float: left; 
} 

それは見出し要素の周りに流れないように、あなたは、その後、次の段落のスタイルをする必要があります。

p { 
    clear: left; 
} 

IE7以下をサポートしていないのであれば、隣接する兄弟セレクタを使用してこの選択をより細かくすることができます。h1要素の直後のp要素だけがスタイルになります。

h1 + p { 
    clear: left; 
}