跨度边框显示奇怪

Question

我制作了我的第一个网站页面，它看起来像这样：

为了做好标题和红色border，我使用以下代码：

＆＃13;

＆＃13;

div {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: 25%;
  font-family: 'Roboto', sans-serif;
  color: white;
  text-align: center;
}
div span {
  border: 2px solid rgba(250, 0, 0, 0.75);
  padding: 5px;
}
div h1 {
  text-transform: uppercase;
  margin: 0;
  font-size: 4rem;
}

＆＃13;

<div>
  <h1><span>This is a title</span></h1>
</div>

＆＃13;

＆＃13;

＆＃13;

但是当我有一个更长的标题时，border显示非常奇怪，如下所示：

在这种情况下，我如何设置该标题的样式，以便只为所有文本提供一个border，就像在第一张图片中一样？

Answer 1

将border添加到h1，然后将其从span中删除，并将display:inline-block设置为h1

＆＃13;

＆＃13;

div{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: 25%;
  font-family: 'Roboto', sans-serif;
  color: black;
  text-align: center;
}
div h1 {
  text-transform: uppercase;
  margin: 0;
  font-size: 4rem;
  /* add this*/
  border: 2px solid rgba(250, 0, 0, 0.75);
  padding: 5px;
  display:inline-block
}

＆＃13;

<div>
  <h1><span>This is a title</span></h1>
</div>

＆＃13;

＆＃13;

＆＃13;

或者我之前提到的（但你确实说过没有为你效劳） - 见revision

将display:inline-block添加到span，因为span是内联元素

＆＃13;

＆＃13;

div span {
  border: 2px solid rgba(250, 0, 0, 0.75);
  padding: 5px;
  display:inline-block
}
div h1 {
  text-transform: uppercase;
  margin: 0;
  font-size: 4rem;
}

＆＃13;

<div>
  <h1><span>This is a title</span></h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将display的{​​{1}}属性更改为span：

inline-block