J'ai

<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>

Pour le style, j'ai

#aboutPyKov {
    border: 8px dotted rgba(255,198,107,0.93);
    border-radius: 20px;
}

Cela fonctionne bien, mais il montre une bordure en pointillés sur toute la largeur de la page entière. Je veux qu'il soit autonome, mais à la place, il parcourt tout l'écran comme vous pouvez le voir dans cette image. Comment puis-je faire en sorte qu'il ne contienne que le texte? En outre, la bordure supérieure étreint la couleur d'arrière-plan au-dessus. J'aimerais aussi savoir comment changer cela.

1
EagleGaming 5 avril 2020 à 22:18

3 réponses

Meilleure réponse

Il s'agit du niveau CSS 1 : bloc et en ligne. Les éléments de bloc occupent 100% des width disponibles sauf si vous les définissez sur float ou définissez un width explicite. Définissez le border sur l'élément de paragraphe ou définissez un width sur votre div.

1
John 5 avril 2020 à 19:32

Essayez d'ajouter padding = 0px" à vos balises <p> et <h2>,

p, h2 {
padding: 0px;
}

Car les balises <p> et <h2> ont un remplissage par défaut appliqué.

1
EagleGaming 5 avril 2020 à 19:40

Modifiez simplement l'attribut d'affichage

#aboutPyKov {
    border: 8px dotted rgba(255,198,107,0.93);
    border-radius: 20px;
    display:inline-block; // just change the display
}
0
Anwar Gul 5 avril 2020 à 19:39