Warum die Hintergrundfarbe von <p> - tag und " <p1> tag unterschiedlich sind?

Hier die 'p' - tag ist für die ganze Zeile mit einer Hintergrundfarbe in der Erwägung, dass die " p1 " - tag zeigt die Hintergrundfarbe auf der nur text.

CSS:

h1 {
  color: red;
  font-weight: bolder;
}

#c {
  background-color: #096;
}

h3 {
  font-family: "Palatino Linotype";
}

#c2 {
  color: #900;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
}

p1 {
  font-size: 36px;
}

HTML:

<h1>xcvxcv</h1>
<p1 id="c">xcvcxv</p1> <!-- background color isn't covering the row -->

<h3>xcvxcv</h3>
<h4>xcvxvd</h4>
<h5>sdfdsf</h5>
<p id="c">sdfdsfsfd</p> <!-- background color of this '<p>' tag is covering the entire row -->

  • <p1> existiert nicht, ich glaube, Sie wollte schreiben <p>
  • Werden Sie sich bewusst, dass ids muss eindeutig sein für jedes Dokument ein: w3.org/TR/html5/dom.html#the-id-attribute
  • Nein, die OP definitiv gemeint <p1>. Der Sinn dieser ganzen Frage dreht sich um die rendering-Unterschiede zwischen einer standard-HTML-element und einem unbekannten element.
  • Siehe auch: Warum funktioniert CSS mit fake-Elemente?
InformationsquelleAutor Nikhil Kamath | 2015-02-13
  1. 5

    Weil <p> tags haben eine Standard-Stil von display: block, was bedeutet, dass es dauern wird, bis eine Zeile von Inhalten. Wenn Sie möchten, dass Ihre benutzerdefinierten <p1> - tag Verhalten sich ähnlich (da es sich nicht um ein standard-tag), müssen Sie fügen Sie Ihre eigenen styling-wie so:

    p1 { 
  font-size: 36px;
  display: block;
}
    • Was meinst du mit Erben Stil display:block? p ist eine block-level-element, so dass Sie nicht haben, um Erben nichts.
    • Du meinst wohl "Standard-Stil", nicht "vererbt Stil". Es Erben nicht von jedem anderen element, das zugeordnet ist, direkt an den p element durch das UA-stylesheet.
    • Ja, ist es. Aber wo denken Sie, Sie haben den Stil aus? Ich stehe korrigiert, 'default' wäre in der Tat der passendere Begriff.
    InformationsquelleAutor irot
Schreibe einen Kommentar