如何在 HTML 中创建独立的边框？

Question

我有<div id="aboutPyKov">        <h2 id="pyKovSubheading">About PyKov</h2>        <p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur             adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f             acilisi. Quisque tempus<br/>varius enim, quis mattis metus,             <br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur             adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis             turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut            lacinia magna. Maecenas gravida<br/>interdum turpis non             fermentum.</p>                                              </div>对于造型，我有#aboutPyKov {    border: 8px dotted rgba(255,198,107,0.93);    border-radius: 20px;}这工作正常，但是它在整个页面的整个宽度周围显示了一个虚线边框。我希望它是独立的，但相反，它会环绕整个屏幕，正如您在这张图片中看到的那样。我该如何使它只围绕文本？此外，顶部边框紧贴其上方的背景颜色。我也想知道如何改变这一点。

Answer 1

这是 CSS 级别1：块和内联。块元素占用 100% 的可用空间width，除非将它们设置为float或设置显式width. 将 设置border为段落元素或将 a 设置width为您的div.

Answer 2

尝试添加padding = 0px"到您的<p>标签和<h2>标签，

p, h2 {

padding: 0px;

}

因为<p>和<h2>标签应用了默认填充。

Answer 3

只需更改显示属性即可

#aboutPyKov {

    border: 8px dotted rgba(255,198,107,0.93);

    border-radius: 20px;

    display:inline-block; // just change the display

}