{"id":5219,"date":"2015-07-02T12:15:57","date_gmt":"2015-07-02T09:15:57","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5219"},"modified":"2018-01-08T14:22:05","modified_gmt":"2018-01-08T12:22:05","slug":"css-margin-top-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/","title":{"rendered":"CSS Margin Top Example"},"content":{"rendered":"<p>In this example, we will have a look at the <code>margin<\/code> property of css. More specifically, we will see the usage and applications of <code>margin-top<\/code>.<\/p>\n<p>The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.<\/p>\n<p>It is supported by all modern browsers and cen be applied by using the <code>margin: value;<\/code> notation or <code>margin-top\/bottom\/right\/left: value;<\/code>.<\/p>\n<p>You have probably used it when working on a web project (front-end) to accommodate elements better and make them look comfortable.<\/p>\n<p>Below, lets see how you can apply this property and a few examples.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>1. Basic Setup<\/h2>\n<p>Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;CSS3 Text Decoration Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- STYLE SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML SECTION --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2>2. Basic Application &amp; Examples<\/h2>\n<p>Below, you can see some cases and examples of the usage of margin top property.<\/p>\n<h3>2.1 Basic Application<\/h3>\n<p>The most basic application of the margin property would be to give an element (like text) a value for the margin property:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;h3&gt;This is the basic application.&lt;\/h3&gt;\r\n<\/pre>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE  SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\nh3 {\r\n\tmargin-top: 50px;\t\/* 50px space from the top *\/\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>The result would be:<br \/>\n<figure id=\"attachment_5233\" aria-describedby=\"caption-attachment-5233\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top1.jpg\" alt=\"Margin-Top Basic Application\" width=\"820\" height=\"232\" class=\"size-full wp-image-5233\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top1-300x85.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5233\" class=\"wp-caption-text\">Margin-Top Basic Application<\/figcaption><\/figure><\/p>\n<p>But you can even force a margin of 0px, meaning any default margin of that element will be gone. Taking into consideration <\/p>\n<p>the example above we just did, change only in your css tthe margin-top from 50px to 0px to see the expected result:<\/p>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE  SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\nh3 {\r\n\tmargin-top: 0px;\t\/* 0px space from the top *\/\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>See how it removed the h3 tag default margin by setting it to 0px:<br \/>\n<figure id=\"attachment_5237\" aria-describedby=\"caption-attachment-5237\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top3.jpg\" alt=\"Top-Margin of 0px\" width=\"820\" height=\"157\" class=\"size-full wp-image-5237\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top3-300x57.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5237\" class=\"wp-caption-text\">Top-Margin of 0px<\/figcaption><\/figure><\/p>\n<h3>2.2 Image Example<\/h3>\n<p>Another example would be when there are also other elements around our element. Look at the code below:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;h2&gt;Heading Here&lt;\/h2&gt;\r\n&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod &lt;br&gt;\r\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, &lt;br&gt;\r\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo &lt;br&gt;\r\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse &lt;br&gt;\r\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non &lt;br&gt;\r\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum. &lt;\/p&gt;\r\n\r\n&lt;img src=\"image.jpg\"&gt;\r\n<\/pre>\n<pre class=\"brush:css\">\r\nimg {\r\n\tmargin-top: 28px;\r\n}\r\n<\/pre>\n<p>You can now see that the image is 28px below the text above it (in general, the previous element):<br \/>\n<figure id=\"attachment_5235\" aria-describedby=\"caption-attachment-5235\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top2.jpg\" alt=\"Applying Margin-Top in relation to other Elements\" width=\"820\" height=\"565\" class=\"size-full wp-image-5235\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top2-300x207.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5235\" class=\"wp-caption-text\">Applying Margin-Top in relation to other Elements<\/figcaption><\/figure><br \/>\nThe light orange rectangle indicates the space where margin has been applied (assuming there is no padding).<\/p>\n<p><strong>&#8211; Table Example<\/strong><\/p>\n<h3>2.3 Table Example<\/h3>\n<p>Notice that because you apply margin it means you do not refer to internal spaces (like padding) but to outer space <\/p>\n<p>of the element. Below you can see a simple html of two tables given margin top property to the table element.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;table&gt;\r\n&lt;th&gt;Name&lt;\/th&gt;\r\n&lt;th&gt;Surname&lt;\/th&gt;\r\n&lt;th&gt;Age&lt;\/th&gt;\r\n&lt;tr&gt;\r\n\t&lt;td&gt;Fabio&lt;\/td&gt;\r\n\t&lt;td&gt;Cimo&lt;\/td&gt;\r\n\t&lt;td&gt;21&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n\t&lt;tr&gt;\r\n\t&lt;td&gt;Martin&lt;\/td&gt;\r\n\t&lt;td&gt;Brown&lt;\/td&gt;\r\n\t&lt;td&gt;29&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n\t&lt;tr&gt;\r\n\t&lt;td&gt;Alex&lt;\/td&gt;\r\n\t&lt;td&gt;Mica&lt;\/td&gt;\r\n\t&lt;td&gt;32&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n&lt;table&gt;\r\n&lt;th&gt;Name&lt;\/th&gt;\r\n&lt;th&gt;Surname&lt;\/th&gt;\r\n&lt;th&gt;Age&lt;\/th&gt;\r\n&lt;tr&gt;\r\n\t&lt;td&gt;Fabio&lt;\/td&gt;\r\n\t&lt;td&gt;Cimo&lt;\/td&gt;\r\n\t&lt;td&gt;21&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n\t&lt;tr&gt;\r\n\t&lt;td&gt;Jorgos&lt;\/td&gt;\r\n\t&lt;td&gt;Brandon&lt;\/td&gt;\r\n\t&lt;td&gt;41&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n\t&lt;tr&gt;\r\n\t&lt;td&gt;Fabio&lt;\/td&gt;\r\n\t&lt;td&gt;Cimo&lt;\/td&gt;\r\n\t&lt;td&gt;21&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p><strong>&#8211; CSS<\/strong><\/p>\n<pre class=\"brush:css\">\r\ntable {\r\n\tborder: 1px solid #ccc;\r\n\tmargin-top: 5em;\r\n}\r\n\r\nth {\r\n\tpadding-right: 2em;\r\n}\r\n<\/pre>\n<p>The tables will now have some space in top of them:<br \/>\n<figure id=\"attachment_5246\" aria-describedby=\"caption-attachment-5246\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top4.jpg\" alt=\"Margin-Top Tables Example\" width=\"820\" height=\"463\" class=\"size-full wp-image-5246\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/top4-300x169.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5246\" class=\"wp-caption-text\">Margin-Top Tables Example<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion <\/h2>\n<p>To conclude, margin top is a property of css that is pretty straight-forward and requires no big knowledge of css to apply on your various elements to fit them right into the page.Feel free to play around and see how you can use it in other ways.<\/p>\n<h2>4. Download<\/h2>\n<div class=\"download\">\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/CSS-Margin-Top.zip\"><strong>CSS Margin Top<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. It is supported by all modern browsers &hellip;<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Margin Top Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Margin Top Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-02T09:15:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:22:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Margin Top Example\",\"datePublished\":\"2015-07-02T09:15:57+00:00\",\"dateModified\":\"2018-01-08T12:22:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\"},\"wordCount\":453,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\",\"name\":\"CSS Margin Top Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-02T09:15:57+00:00\",\"dateModified\":\"2018-01-08T12:22:05+00:00\",\"description\":\"In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Margin Top Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Margin Top Example - Web Code Geeks - 2026","description":"In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Margin Top Example - Web Code Geeks - 2026","og_description":"In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-07-02T09:15:57+00:00","article_modified_time":"2018-01-08T12:22:05+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Margin Top Example","datePublished":"2015-07-02T09:15:57+00:00","dateModified":"2018-01-08T12:22:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/"},"wordCount":453,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/","name":"CSS Margin Top Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-02T09:15:57+00:00","dateModified":"2018-01-08T12:22:05+00:00","description":"In this example, we will have a look at the margin property of css. More specifically, we will see the usage and applications of margin-top. The margin","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-top-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Margin Top Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5219"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5219\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}