Preview:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatib1e" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
< link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>


<!-- block -->
<div class="div1"></div>

<!-- inline -->
<!-- inline ها طول و عرض نمیگیرند-->
<!-- inline مارجین top نمی گیرند-->
<span class="span1"></span>

<!-- inline-block -->
<!-- inline-block جفت خصوصیات هم رو دارند -->
<span class="span2"></span>

</body>
</html>

file style.css

.div1{
background-color: blue;
width: 200px;
height: 200px;
}

.span1{
color:snow;
background-color: red;
padding:5px;
}

.span2{
color:purple;
background-color: black;
padding:5px;
display:inline-block;
margin-top:50px;
}

Here are the block display elements in HTML:
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

Here are the inline display elements in HTML:
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter