block will always stack (forms a new line)
inline will horizontal and height, margin-top, margin-bottom are not working
inline-block will not form a new line and can set height, margin-top, margin-bottom
Example:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<p>nonosnon</p>
<p>nonosnon</p>
<p>nonosnon</p>
<div>
<a>nonosnon</a>
<a>nonosnon</a>
<a>nonosnon</a>
</div>
<a class="btn">Link </a>
<style>
p {
outline: 3px solid red;
width: 25%;
}
a {
outline: 3px solid blue;
width: 25%;
height: 200px; /* not working */
margin-bottom: 2em; /* not working */
margin-top: 2em; /* not working */
font-size: 200%; /* not suggest */
}
.btn {
display: inline-block; /* to let height,margin-top,margin-bottom work */
background: lightblue;
text-decoration: none;
}
.btn:hover {
background: red;
}
</style>
</body>
</html>