Empty buttons appearing in console and on webpage that isn't in the html file-CodePudding

I'm seeing two buttons with no text in them on a page. The buttons do not appear in the code I wrote nor in the source code of the page.

When I check the console/use inspect element, I see two <button> tags with a space in between the opening tag and end tag.

I tried running it in JSFiddle instead and am getting the same thing so I doubt its on my end.

I'm confused as hell and would some appreciate help.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Clicker Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <div>
            <h1 >Clicker Game</h1>
            <h2 >Level: 0</h2>
            <h2 >Skill Points: 0</h2>
        </div>
        <div>
            <div id="skillsContainer">
                <button id="strength" onclick="strength()"><p ><strong>Strength</strong></p><button>
                <button id="expandButton" onclick="expandSkills()"><p ><strong>Expand</strong></p></button>
                <button id="minion" onclick="minion()"><p ><strong>Minion</strong></p><button>
            </div>
            <button id="xpButton" onclick="xpAdd()"><p ><strong>Click Me!</strong></p></button>
        </div>
    </div>
</body>
</html>

CSS:

.title {
    display: flex;
    justify-content: center;
}
#xpButton {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-top: 100px;
    margin-right: 15%;
    cursor: pointer;
    height: 150px;
    width: 150px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    color: green;
}
#xpButton:hover {
    background-color: green;
    color: white;
}
.flex {
    display: flex;
}
#skillsContainer {
    margin-left: 350px;
    margin-top: 0px;
}
#strength {
    height: 100px;
    display: none;
    margin-top: 175px;
    cursor: pointer;
}
#minion {
    height: 100px;
    display: none;
    margin-top: 175px;
    cursor: pointer;
}
#expandButton {
    height: 100;
    display: flex;
    cursor: pointer;
}
.center {
    display: flex;
    margin: auto;
}

CodePudding user response：

Use a markup validator. Your HTML has many errors in it.

In particular, button elements are not allowed to contain paragraphs and the effect you see is the browser attempting to recover from that error.