私はhtmlで「ハイライト」クラスを作っていましたが、段落のマージンを変更すると段落の余白が変わります

Question

3週間前にhtmlを始めました。私は今、外部を理解しています。特定の行動に間違った言葉を使用すると、私を許してください。私は自分のスタイルタグで "ハイライト"クラスを作成し、背景色を黄色に変更して動作します。私の段落タグにクラスを割り当てると、段落の余白が変わります。あなたは（http://www.derekowens.com/ch06.css）を含めているスタイルシートがすでに.highlightクラスがあり、それはそれが適用されています要素の幅を制限しているためだ

.highlight { 
 
    background-color: yellow; 
 
}

<link rel=stylesheet type=text/css href=http://www.derekowens.com/ch06.css> 
 

 
<h1>test test test test test test test test test test test test test test test test test test test test test test test test test</h1> 
 
<p>test test test test test test test test test test test test test test test test test test test test test test test test test</p> 
 
<p>test test test test test test test test test test test test test test test test test test test test test test test test test </p> 
 
<p class="highlight">test test test test test test test test test test test test test test test test test test test test test test test test test.</p> 
 
</body>

Answer 1

。

は、次のルールがch06.cssで定義されています：

.highlight { 
    background-color: yellow; 
    width: 200px; 
} 

が、これはあなた自身の.highlightクラスでwidthプロパティの値を上書き修正するには、initialのようなものを。ハイライトクラスの名前を既存のクラスから継承しないように変更することもできます。つまり、.hlです。

注：ch06.cssファイルは、pのいくつかの扱いにくいスタイルも設定します。

Answer 2

技術的には余白を変更していない - <p>はブロックレベルの要素なので、黄色の背景が利用可能なスペースの全幅を埋める。 spanはインライン要素なので、これは動作するはず

<p>Test <span class="highlight">test test</span> test.</p> 

：

はこれを試してみてください。

Reference

Answer 3

あなたはch06.cssで.highlight { width: 200px; }を持っています。段落の幅を制限したくない場合は削除します。