Review the code snippet below:
<!doctype html>
<html>
<style>
div.compact-inverse {
border: 1px solid black;
}
div.compact-inverse > input {
display: inline-block;
width: 16px;
height: 16px;
margin: 12px 0;
}
div.compact-inverse > label {
display: inline;
margin: 12px 0;
padding-left: 18px;
border: 1px solid red;
background-color: pink;
}
div.compact-inverse > p {
display: block;
margin: 12px 0;
padding-left: 34px;
border: 1px solid blue;
background-color: cyan;
}
</style>
<body>
<form>
<div class='compact-inverse'>
<input type='checkbox' name='delete_imported' /><label>Delete originals</label>
<p>Original files will be deleted after the import when possible.</p>
</div>
</form>
</body>
</html>The screenshot shows that the vertical margin between the first row (input with label) and the second row (paragraph) is stacked rather than collapsed.
Can you identify why this is happening?