Question

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

请注意，p和p1的宽度相同：

＆＃13;

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

＆＃13;

<p>This is a paragraph</p>

<p1>This is another paragraph</p1>

＆＃13;

但是，在Web浏览器中预览时，边框的宽度会显示不同。是什么引起了这个？

如果我将width中的p1更改为其他值，则预览中边框的宽度也不会更改。但我可以按预期调整p的宽度。

Answer 1

p1不是HTML元素，而是使用类。

或者，如果您想创建自定义元素阅读HTML custom elements

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

此处，p1是自定义标记，不会继承块元素的属性。

您必须手动将display: block分配给p1才能使其成为块级元素。

＆＃13;

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

＆＃13;

<p>This is a paragraph</p>

<p1>This is another paragraph</p1>

＆＃13;

Answer 3

您需要在第二段中添加类或ID，因为p1不是HTML元素。

在CSS中选择一个类时，请使用一段时间。选择ID时，请使用＃。

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

.p1 {
  xxx
}

或

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

#p1 {
  xxx
}

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

3 个答案: