Why is vertical spacing eliminated when block elements are wrapped with div?

shakozzz

I have a reset button inside two nested div elements. If I set the button's display property to block, the inner div wraps nicely around the button. However, if I leave the button as inline, the inner div stretches vertically.
I understand that block elements cause a line break before and after, but this alone doesn't explain to me this behavior with the spacing.
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-05-19/1589895863-771658-image.png]
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-05-19/1589896121-15450-image.png]

I appreciate any insights as well as resources you could point me towards!
I've posted the full code on Codepen.

VITSUSA

Can you please share the snapshot of coding? It will more helpful to us to understand the exact problem.

shakozzz

Oh, I thought hosting the code on Code Pen would be nicer, but sure. Here you go 🙂

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors!</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>
            Rock Paper Scissors
        </h1>
    </header>
    <div class="score-board">
        <div class="badge" id="user-label">user</div>
        <div class="badge" id="comp-label">comp</div>
        <span id="user-score">0</span>:<span id="comp-score">0</span>
        <div class="reset-button">
            <button type="reset">reset</button>
        </div>
    </div>
    <div class="result">
        <p>Paper covers rock. You win!</p>
    </div>
    <div class="choices">
        <div class="choice" id="s"><img src="https://img.icons8.com/color/48/000000/hand-scissors.png" /></div>
        <div class="choice" id="p"><img src="https://img.icons8.com/color/48/000000/hand.png" /></div>
        <div class="choice" id="r"><img src="https://img.icons8.com/color/48/000000/hand-rock.png" /></div>
    </div>
    <p id="action-msg">Make your move!</p>
    <script src="app.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Asap, sans-serif;
    color: white;
}

body {
    background-color: #282730;
}

header {
    background-color: white;
    padding: 20px;
}

header>h1 {
    color: black;
    text-align: center;
}

div>p {
    text-align: center;
}

.score-board {
    border: 3px solid white;
    border-radius: 4px;
    text-align: center;
    width: 200px;
    margin: 20px auto;
    font-size: 40px;
    padding: 15px 20px;
    position: relative;
}

.badge {
    background: #E1574F;
    font-size: 14px;
    padding: 2px 10px;
}

#comp-label {
    position: absolute;
    top: 30px;
    left: -26px;
}

#user-label {
    position: absolute;
    top: 30px;
    right: -25px;
}

.result {
    font-size: 40px;
    font-weight: bold;
}

.choice {
    display: inline-block;
    border: 4px solid white;
    border-radius: 50%;
    padding: 10px;
    margin: 0 20px;
    transition: all 0.2s ease;
}

.choices {
    /* margin: 50px 0 20px 0; */
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: center;
}

.choice:hover {
    cursor: pointer;
    background: black;
}

#action-msg {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.green-glow {
    border: 4px solid #4dcc7d;
    box-shadow: 0 0 10px #31b43a;
}

.red-glow {
    border: 4px solid #fc121b;
    box-shadow: 0 0 10px #d01115;
}

.grey-glow {
    border: 4px solid #464647;
    box-shadow: 0 0 10px #25292b;
}

.reset-button {
    text-align: center;
    border: solid;
    width: fit-content;
    margin: 0 auto;
}

div.reset-button>button[type="reset"] {
    background: green;
    color: white;
    display: block;
}

bwclovis

Not sure of the whys, but its the font size. Looks like it SHOULD be 40px but is getting set to 14(ish)... somewhere. Adding font-size: whatever size to the reset-button class should do it.. THAT being said, whats the purpose of this div?

shakozzz

bwclovis Thanks for the reply! So you're saying div.reset-button expects its content to have font 40px, but since its content for some reason actually has font size around 14px it makes up for that by adding blank vertical space?
Furthermore, do you say the font should be 40px because that's what's set for class score-board?

.score-board {
    border: 3px solid white;
    border-radius: 4px;
    text-align: center;
    width: 200px;
    margin: 20px auto;
    font-size: 40px;
    padding: 15px 20px;
    position: relative;
}

Well, the only place where I set any font size to 14px is in the badge class, but I don't think that would affect the button, would it?

.badge {
    background: #E1574F;
    font-size: 14px;
    padding: 2px 10px;
}

Also, out of curiosity, how were you able to gauge the font size as 14(ish)?
Finally, I used div because I wanted to have the button on a separate line. But I guess I could just get rid of div and rely solely on display: block to achieve that.

bwclovis

I probably would kill the wrapping div, not needed. To see the font size I used dev tools. At a QUICK glance it looks like an inheritance issue.

anthony7nr

shakozzz, thanks for explanation.