<div class="container">
	<div id="box1" class="box" style="margin-bottom: 20px; background-color: lightblue;">Box 1</div>
	<div id="parent">
		<div id="box2" class="box" style="margin-top: 20px; background-color: lightcoral;">Box 2</div>
	</div>
</div>
<p class="intro">Box 2 is in a parent div that has a box shadow. With the following you can prevent margin collapse:</p>
<div class="controls">
	<label><input type="checkbox" id="borderToggle"> Add border to parent</label>
	<label><input type="checkbox" id="paddingToggle"> Add padding to parent</label>
	<label><input type="checkbox" id="flowrootToggle"> Add "display: flow-root"</label>
	<label><input type="checkbox" id="ovhiddenToggle"> Add "overflow: hidden"</label>
	<label><input type="checkbox" id="flexToggle">Make parent flex container</label>
	<label>...</label>
</div>
<p class="intro">Check in developer tools where the margins and paddings are.</p>

body {
	font-family: Arial, sans-serif;
	box-sizing: border-box;
}

.container {
	width: 80%;
	margin: 0 auto;
	padding: 20px;
	border: 2px solid #000;
}

label {
	display: block;
	padding: 8px;
}

.box {
	padding: 10px;
	text-align: center;
}

.controls {
	margin-top: 20px;
	text-align: center;
}

#parent {
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 16px;
}

.intro {
	font-weight: bold;
	text-align: center;
}

#box2 {
	flex: 1;
}

document.addEventListener("DOMContentLoaded", function () {
	document
		.getElementById("borderToggle")
		.addEventListener("change", function (e) {
			document.getElementById("parent").style.border = e.target.checked
				? "5px solid black"
				: "";
		});

	document
		.getElementById("paddingToggle")
		.addEventListener("change", function (e) {
			document.getElementById("parent").style.padding = e.target.checked
				? "20px 0"
				: "";
		});

	document
		.getElementById("flowrootToggle")
		.addEventListener("change", function (e) {
			document.getElementById("parent").style.display = e.target.checked
				? "flow-root"
				: "";
		});

	document
		.getElementById("ovhiddenToggle")
		.addEventListener("change", function (e) {
			document.getElementById("parent").style.overflow = e.target.checked
				? "hidden"
				: "";
		});

	document.getElementById("flexToggle").addEventListener("change", function (e) {
		document.getElementById("parent").style.display = e.target.checked
			? "flex"
			: "";
	});
});