Why does Display: Block stop shifting?

HTML-CSS
1 
HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card">
        <input type="checkbox">
                <h2>Cloud Storage</h2>
        <p>10gb secure storage</p>
    </label>
</div>
</body>

</html>

CSS
input[type="checkbox"]{
appearance: none;
border: 3px black solid;
width: 25px;
height: 25px;
border-radius: 5px;
/*display: block;*/
}



input[type="checkbox"]:checked{
background: black;
}



input[type="checkbox"]:checked::after{
text-align: center;
content: "✓";
color: white;
display: block;
}

.feature-card{
display: block;
margin: 2rem;
border: 2px solid black;
padding: 1rem;
border-radius: 10px;
width: 50%;
height: 10rem;
}

h1, h2, p{
text-align: center;
display: block;
}

Whats happening is that when i comment the display my paragraph and h2 inside my label doesn’t shift up when the check box is checked. But when i comment it out the h2 and paragraph shift when the check box is checked. I would just like to know what is going on here beacuse i dont under stand why block stops the shifting.

The lab i got this from.

2

its how “display:block;” works, you can look into that further. also when you are using “block” your assigned “border/margin/padding/etc” gets enabled causing some sort of layout shift, hope that helps, happy coding :slight_smile: