在标题和段落周围放置边框

Question

我试图在标题和段落周围放置一个边框。目前我在标题和段落周围有两个单独的边框。我怎样才能在它们周围放置一个边框？

 <style type="text/css">
h1{
 font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
p{
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
</style>

<h1>Hello</h1>
<p>World</p>

原文由 Ninja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

就像 Harry 上面建议的那样，只需将它们添加到包装器中，然后在包装器上设置样式即可。像这样：

 div {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}

 <div>
  <h1>Hello</h1>
  <p>World</p>
</div>

---

或者，如果您不能或不想更改标记，您可以简单地删除左下角和右下角的 border 和 border-radius 为你的 h1 并删除左上角和右上角的 border 和 border-radius 你的 p 元素。这也将产生您正在寻找的外观。

 h1, p {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
  margin: 0;
  padding: 10px 0;
}

h1 {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

p {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

   <h1>Hello</h1>
  <p>World</p>

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 h1{
 font-family: consolas;
}
p{
font-family: Consolas;
}
.wrapper{
 border: 2px solid #73AD21;
border-radius: 25px;
padding-left: 15px;
padding-right: 15px;
}

 <div class="wrapper">
<h1>Hello</h1>
<p>World</p>
</div>

将两个标签放在包装纸下并给出预期的边框。请查看以下内容： CSS：

 <style type="text/css">
h1{
 font-family: consolas;
}
p{
font-family: Consolas;
}
.wrapper{
border: 2px solid #73AD21;
border-radius: 25px;
padding-left: 15px;
padding-right: 15px;
}
</style>

HTML:

 <div class="wrapper">
<h1>Hello</h1>
<p>World</p>
</div>

原文由 Md. Ranju Mia 发布，翻译遵循 CC BY-SA 3.0 许可协议