如何在 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
}