body {
border: 2px solid black;
height: 100px;
}
div {
vertical-align: middle;
display: inline-block;
width: 50px;
height: 50px;
}
.a {
border: 2px solid red;
margin-top: 20px;
}
.b {
border: 2px solid green;
}<!DOCTYPE html>
<html>
<body>
<div class="a">a</div>
<div class="b">b</div>dsfdg
</body>
</html>What is the reason for both blocks not being aligned to the center? Why is there a peculiar gap between the top borders of the body and block b? Isn't something like this anticipated without explicitly adding top margin to block b?
body {
border: 2px solid black;
height: 100px;
}
div {
vertical-align: middle;
display: inline-block;
width: 50px;
height: 50px;
}
.a {
border: 2px solid red;
margin-top: 10px;
}
.b {
margin-top: 10px;
/*should not block b come automatically 10 px down without adding top margin to it */
border: 2px solid green;
}<!DOCTYPE html>
<html>
<body>
<div class="a"></div>
<div class="b"></div>dsfdg
</body>
</html>