html - 为什么标签和标签的背景颜色不一样？

Question

此处“p”标签用背景色覆盖整行，而“p1”标签仅在文本上显示背景色。

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;
}

<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 -->

Answer 1

那是因为 <p>标签的默认样式为 display: block ，这意味着它将占用一行内容。如果你想要你的定制 <p1>标签的行为相似(因为它不是标准标签)，您必须像这样添加自己的样式:

p1 { 
  font-size: 36px;
  display: block;
}