<!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>
Preview:
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