私は<strong>HTML</strong>で2つの段落を設定しているCSS

Question

では境界線の幅を設定することができません：pとp1の両方の幅が同じであることを

注：

p { 
 
    font-family: calibri; 
 
    font-size: 13px; 
 
    border-style: double; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 500px; 
 
    margin-bottom: 80px; 
 
    padding: 2cm 2cm; 
 
} 
 

 
p1 { 
 
    font-family: impact; 
 
    font size: 20px; 
 
    border-style: groove; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 500px; 
 
    margin-bottom: 80px; 
 
    padding: 2cm 2cm; 
 
}

<p>This is a paragraph</p> 
 

 
<p1>This is another paragraph</p1>

ただし、ウェブブラウズでプレビューするとrでは、境界線の幅が異なって見えます。これは何の原因ですか？

p1のwidthを別の値に変更すると、プレビューの枠線の幅も変更されません。しかし、私はpの幅を予想どおりに調整することができます。

Answer 1

p1はHTML要素ではなく、代わりにクラスを使用してください。

それとも、HTMLここcustom elements

p { 
 
    font-family: calibri; 
 
    font-size: 13px; 
 
    border-style: double; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 500px; 
 
    margin-bottom: 80px; 
 
    padding: 2cm 2cm; 
 
} 
 

 
.p1 { 
 
    font-family: impact; 
 
    font size: 20px; 
 
    border-style: groove; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 500px; 
 
    margin-bottom: 80px; 
 
    padding: 2cm 2cm; 
 
}

<p>This is a paragraph</p> 
 

 
<p class=p1>This is another paragraph</p>

Answer 2

についての記事を読むカスタム要素を作成したい場合は、p1は、カスタムタグで、ブロック要素の属性を継承しません。

ブロックレベル要素として動作するには、p1に手動でdisplay: blockを割り当てる必要があります。

p { 
 
    font-family: calibri; 
 
    font-size: 13px; 
 
    border-style: double; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 500px; 
 
    margin-bottom: 80px; 
 
    padding: 2cm 2cm; 
 
} 
 

 
p1 { 
 
    font-family: impact; 
 
    font size: 20px; 
 
    border-style: groove; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 500px; 
 
    margin-bottom: 80px; 
 
    padding: 2cm 2cm; 
 
    display: block; 
 
}

<p>This is a paragraph</p> 
 

 
<p1>This is another paragraph</p1>

Answer 3

あなたはp1は、HTML要素ではないとして、2番目の段落にクラスやIDを追加する必要があります。

CSSでクラスを選択するときは、その前にピリオドを使用します。 IDを選択するときは、＃を使用します。

<p class=p1>This is another paragraph</p> 

.p1 { 
    xxx 
} 

または

<p id=p1>This is another paragraph</p> 

#p1 { 
    xxx 
}