Normalement, on s'attendrait à ce qu'il y ait un cadre autour de tout le paragraphe contenant la liste. À la place, on a un cadre autour de la première phrase, et un cadre vide à la fin du paragraphe.
C'est parce que l'élément p ne
peut contenir que du contenu phrasé, ce qui exclut en particulier les listes ! L'élément p ne représente pas vraiment un paragraphe
au vrai sens du terme…
Du coup, le navigateur « corrige » lui-même l'erreur :
il considère qu'il y a une balise fermante </p> juste avant la balise <ul> (ça explique le cadre autour de la première phrase). Mais du coup,
quand il rencontre la « vraie » balise fermante </p>, il ne comprend pas, et rajoute donc une balise ouvrante juste avant — ce qui explique le cadre vide.
Quand on regarde le code dans l'inspecteur, on voit bien que les paragraphes qu'il considère ne sont pas ceux qu'on croit.
Les propriétés CSS que voit l'inspecteur sont les suivantes :
font-weight: bold color: whitebackground-color: tomatoIl croit qu'on donne la valeur « bold color: white » à font-weight, et comme ça n'a pas de sens, il ignore la propriété. L'erreur est évidemment l'oubli du point-virgule après bold.