无法在CSS中设置边框的宽度

Question

我在HTML中设置了两个段落:

需要注意的是在宽度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>

但是,在Web浏览器中预览时,边框的宽度会显示不同.是什么导致了这个？

如果我改变width在p1不同的值,在预览边框的宽度也不改变.但我能够p按预期调整宽度.

Answer 1

p1 不是HTML元素,而是使用类.

或者,如果要创建自定义元素请阅读HTML 自定义元素

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>