如何在 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.&nbsp;将 设置border为段落元素或将 a 设置width为您的div.

Answer 2

尝试添加padding = 0px"到您的<p>标签和<h2>标签，p, h2 {padding: 0px;}因为<p>和<h2>标签应用了默认填充。

Answer 3

只需更改显示属性即可#aboutPyKov {&nbsp; &nbsp; border: 8px dotted rgba(255,198,107,0.93);&nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; display:inline-block; // just change the display}