Among the various types of HTML elements, inline and inline-block elements have their differences. One such difference is that inline elements don't support margin-top or margin-bottom properties like inline-block elements do. However, in a specific example below, adding a margin to an inline-block element seems to also affect the inline elements around it. This has left me puzzled and searching for answers for over an hour without success. Can anyone shed light on why this is happening?
<html>
<head>
<style>
div {
background:yellow;
margin:10px;
height:70px;
}
a {
display:inline;
background-color:#FFF;
width:20px;
height:20px;
border:solid black 1px;
}
span {
margin-top:10px;
display:inline-block;
background:red;
}
a, span{
vertical-align:center;
}
</style>
</head>
<body>
<div>
<a>abcd</a>
<a>efgh</a>
<span>Some text</span>
</div>
</body>
</html>
Upon observation, I noticed https://i.sstatic.net/I9e4X.png
Both the 'abcd' and 'efgh' elements display a 10px margin similar to the span element.