如何在 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设置为段落元素或将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
}