Как создать автономные границы в 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

Попробуйте добавить padding = 0px" к тегу <p> и тегу <h2>,

p, h2 {
padding: 0px;
}

, поскольку для тегов <p> и <h2> применено заполнение по умолчанию.

Answer 2

Это CSS уровень 1 : блочный и встроенный. Блочные элементы занимают 100% от доступного width, если вы не установите их на float или не установите явное width. Либо установите border для элемента абзаца, либо установите width для вашего div.

Answer 3

Просто измените атрибут отображения

#aboutPyKov {
    border: 8px dotted rgba(255,198,107,0.93);
    border-radius: 20px;
    display:inline-block; // just change the display
}