Unable Breite einer Grenze in CSS setzen

Question

ich zwei Absätze in HTML gesetzt haben:

Beachten Sie, dass die Breite in beiden p und p1 gleich sind:

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>

Allerdings bei der Vorschau in einem Web-Browser r, die Breite der Grenzen erscheint anders. Was verursacht das?

Wenn ich width in p1 auf einen anderen Wert ändern, ändert sich auch die Breite des Rahmens in der Vorschau nicht. Aber ich kann die Breite von wie erwartet anpassen.

Answer 1

p1 ist kein HTML-Element, stattdessen Klasse.

Oder, wenn Sie benutzerdefinierte Element Lesen Sie mehr über 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

Hier erstellen möchten, p1 ist ein Tag individuelle und nicht die Attribute eines Blockelements erben.

Sie müssen display: block manuell p1 zuweisen, damit es sich als Blocklevelelement verhält.

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

Sie müssen eine Klasse oder ID zu Ihrem zweiten Absatz als p1 hinzuzufügen ist kein HTML-Element.

Wenn Sie eine Klasse in CSS auswählen, verwenden Sie einen Punkt davor. Verwenden Sie bei der Auswahl einer ID ein #.

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

.p1 { 
    xxx 
} 

oder

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

#p1 { 
    xxx 
}