Discussion :

[TylerDordon]

Bonjour !

Nouveau sur ce forum, je me permet de vous adresser mon code car j'ai un petit problème sur un padding. Après avoir cherche un bon moment sur le web, et modifier tout mes paramètres/position, je ne trouve pas la solution.
Je viens donc m'en remettre à vous.

Je suis en train de créer mon tout premier site internet et dans mon encart placé sur le côté, j'y ai inséré du texte avec un border. Le problème est que je peux le réduire sur le bas mais sur le haut, j'ai un grand espacement entre mon border et mon h4.
Malgré un padding top 0 ou padding 0px 5px, toujours de l'espacement.

Besoin d'aide SVP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="encart">
                    <p>
                        <h4>A propos de l'auteur</h4>
                        Umberto Nobile (Lauro, 21 janvier 1885 - Rome, 30 juillet 1978) est un ingénieur aéronautique et un explorateur italien.
                        Il fut professeur en construction aéronautique à l'Université de Naples pendant plus de trente ans, ainsi que directeur du Stabilimento 
                        militare di Costruzioni Aeronautiche de Rome de 1919 à 1928 et général du corps du génie aéronautique en qualité d'ingénieur de l'aviation 
                        militaire italienne.
                        Umberto Nobile fut un des pionniers et une des personnalités les plus remarquables de l'histoire de l'aéronautique italienne ; il devint 
                        célèbre pour avoir piloté le Norge, premier dirigeable qui survola le pôle Nord puis commandé le dirigeable Italia lors d'une deuxième 
                        expédition polaire.
                    </p>
                    </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#encart
{
    display: flex;
    position: absolute;
    width: 13.5%;
    height: 78%;
    border-width: 1.3px;
    border: thick double #22680da6;
    border-radius: 25px;
    right: 110px;
    top: 380px;
    flex-direction: column;
    text-align: justify;
    padding: 0px 5px;
 
 
}

[mathieu]

l'élément "p" est un élément "bloc" donc il ne peut pas contenir un "h4" qui est du même type.
et donc si vous regardez le code source avec la console de développement de votre navigateur, vous verrez que la balise "p" se ferme avant la balise "h4" se qui cause ce résultat.

par exemple avec Firefox, la console de développement de votre navigateur s'affiche en faisant Ctrl + Maj + C puis cliquez sur l'élément comme expliqué ici :
https://developer.mozilla.org/fr/docs/Outils/inspecteur

[TylerDordon]

Oui effectivement ! je viens d'inspecter la page et oui j'ai la création de 2 balises <p> avant et après h4 qui s'ouvrent et se ferme.

C'est donc pour cela ? L'espacement qui se trouve au dessus de mon titre a l'intérieur de l'encart représente donc la première balise <p> ?

Merci pour votre réponse rapide et précise !

[NoSmoking]

Bonjour et bienvenue sur DVP.

C'est donc pour cela ? L'espacement qui se trouve au dessus de mon titre a l'intérieur de l'encart représente donc la première balise <p> ?

oui mais pas que, si tu as corrigé ton code HTML, pour le rendre conforme, la marge que tu peux observer au dessus de ton élément <h4> et simplement liée à la marge, margin, appliquée par défaut par les navigateurs.

[TylerDordon]

C'est tout bon !

J'ai tout simplement enlevé ma balise p et laissé mon h4 dans ma balise div que j'ai id.

Effectivement, je vois que l'espacement est un peu plus fort à cause du h4 mais le rendu est bien plus esthétique !

Un grand merci pour votre aide, je suis super content d'avoir trouvé une réponse à mon problème aussi rapidement grâce à ce forum.

Voici le résultat


Je marque ce sujet en RESOLU !