So instead of the margins between them becoming 20px they become 40px. Any work around for this aside from not using display inline-block or changing its margins?

Code CSS:
<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>Website Code Tutorials - Testing</title>
<style type="text/css">
div {
margin:20px;
background:red;
}
#two {
display:inline-block;
background:blue;
}
</style> 
</head>
<body>
 
<div>test1</div>
<div id="two">test2</div>
 
</body>
</html>