{"id":19428,"date":"2017-12-12T16:15:10","date_gmt":"2017-12-12T14:15:10","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19428"},"modified":"2018-01-08T14:08:58","modified_gmt":"2018-01-08T12:08:58","slug":"css-margin-bottom-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/","title":{"rendered":"CSS Margin Bottom Example"},"content":{"rendered":"<h2>1. Introduction<\/h2>\n<p>It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like <code>padding<\/code> and <code>margin<\/code> which help with this. They both essentially add space around an HTML element, but with a key difference. While the <code>padding<\/code> property adds or increases the space between the element and its own border, the <code>margin<\/code> property adds space <em>outside<\/em> its own border.<\/p>\n<p>The <code>margin<\/code> property can be used to add space in all directions around the element &#8211; left, right, top and bottom. In this post, we&#8217;ll delve deeper into the <code>margin-bottom<\/code> property.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>2. CSS margin-bottom property<\/h2>\n<p>As the name suggests, this property sets the bottom margin of an HTML element. Interestingly, its value can be set to positive or negative values &#8211; positive values will increase the space\/distance between the element and other elements below it, while negative values will have the opposite effect.<\/p>\n<h3>2.1 Usage syntax<\/h3>\n<p>The value of the <code>margin-bottom<\/code> property can be either of the following:<\/p>\n<ul>\n<li><em>length<\/em> &#8211; This can be in cm, pt, px, em etc. (default = 0)<\/li>\n<li><em>percentage<\/em> &#8211; This is the value in percentage<\/li>\n<li><code>auto<\/code> &#8211; This tells the browser to calculate the bottom margin automatically<\/li>\n<li><code>initial<\/code> &#8211; Sets the property to its default value<\/li>\n<li><code>inherit<\/code> &#8211; Inherits the <code>margin-bottom<\/code> value from the parent element<\/li>\n<\/ul>\n<h3>2.2 A simple example<\/h3>\n<p>Create an HTML file called <code>example.html<\/code> and paste the following contents into it:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>example.html<\/em><\/span><\/p>\n<pre class=\"brush:html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;CSS Margin Bottom Example&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\".\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div class=\"wrapper\"&gt;\r\n\t\t&lt;div class=\"section1\"&gt;Section 1&lt;\/div&gt;\r\n\t\t&lt;div class=\"section2\"&gt;Section 2&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Next, create a stylesheet called <code>style.css<\/code> and paste the following contents into it:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>style.css<\/em><\/span><\/p>\n<pre class=\"brush:css\">.section1 {    \r\n    height: 30px;\r\n    margin-bottom: 10px;\r\n}\r\n.section2 {    \r\n    height: 30px;\r\n}\r\n.wrapper {    \r\n\tborder: 1px solid black;\t\r\n    width: 200px;    \r\n    background-color: gray;\r\n}\r\ndiv {\r\n    width: 200px;\r\n    background-color: white;\r\n}\r\n<\/pre>\n<p>Make sure you have saved both the files, and open <code>example.html<\/code> in your browser. Here&#8217;s what it should look like:<\/p>\n<figure id=\"attachment_19494\" aria-describedby=\"caption-attachment-19494\" style=\"width: 282px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/margin_bottom_simple.jpg\"><img decoding=\"async\" class=\"wp-image-19494 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/margin_bottom_simple.jpg\" alt=\"Fig. 1: Highlighted margin space between two sections\" width=\"282\" height=\"321\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/margin_bottom_simple.jpg 282w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/margin_bottom_simple-264x300.jpg 264w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/a><figcaption id=\"caption-attachment-19494\" class=\"wp-caption-text\">Fig. 1: Highlighted margin space between two sections<\/figcaption><\/figure>\n<p>The grey colored area between the two sections represents the space added by the <code>margin-bottom<\/code> property specified for <em>Section 1<\/em>. You can play around with its\u00a0value to see how it affects the spacing between the sections.<\/p>\n<h2>3. About collapsing margins<\/h2>\n<p>Another interesting point to note, as far as the <code>margin<\/code> property in general is concerned, is its behavior in case of elements which are adjacent to each other <em>and<\/em> aligned vertically (top or bottom). In case <code>margin-top<\/code> and <code>margin-bottom<\/code> are specified for the elements touching each other, the margin value which is actually applied is the greater of the two specified values.<\/p>\n<p>For example, from the previous example, consider <code>section1<\/code> and <code>section2<\/code> as stacked vertically with <code>margin-bottom<\/code> and <code>margin-top<\/code> specified as <code>30px<\/code> and <code>10px<\/code> respectively. In this case, the total margin between them will be <code>30px<\/code>, instead of <code>40px<\/code> which would seem like the logical total value of the margin.<\/p>\n<h3>3.1 Collapsing margins in action<\/h3>\n<p>As we discussed, let&#8217;s re-use the same <code>example.html<\/code> file from our previous example. Now, modify the <code>margin-bottom<\/code> value for <code>section1<\/code>, and add a <code>margin-top<\/code> property to <code>section2<\/code>. Your <code>style.css<\/code> file should look like this (changes are highlighted):<\/p>\n<p><span style=\"text-decoration: underline;\"><em>style.css<\/em><\/span><\/p>\n<pre class=\"brush:css; highlight:[3,7]\">.section1 {    \r\n    height: 30px;\r\n    margin-bottom: 30px;\r\n}\r\n.section2 {\r\n    height: 30px;\r\n    margin-top: 10px;\r\n}\r\n.wrapper {    \r\n\tborder: 1px solid black;\t\r\n    width: 200px;    \r\n    background-color: gray;\r\n}\r\ndiv {\r\n    width: 200px;\r\n    background-color: white;\r\n}\r\n<\/pre>\n<p>Now refresh <code>example.html<\/code> in your browser. The gray area represents the margin gap, as shown in the below screenshot:<\/p>\n<figure id=\"attachment_19507\" aria-describedby=\"caption-attachment-19507\" style=\"width: 273px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/collapsible_margins.jpg\"><img decoding=\"async\" class=\"wp-image-19507 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/collapsible_margins.jpg\" alt=\"Fig. 2: Collapsing margins between 2 div elements\" width=\"273\" height=\"310\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/collapsible_margins.jpg 273w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/collapsible_margins-264x300.jpg 264w\" sizes=\"(max-width: 273px) 100vw, 273px\" \/><\/a><figcaption id=\"caption-attachment-19507\" class=\"wp-caption-text\">Fig. 2: Collapsing margins between 2 div elements<\/figcaption><\/figure>\n<p>The actual margin between the elements is a total <code>30px<\/code>, and not <code>40px<\/code> as logic would otherwise suggest.<\/p>\n<h3>3.2 Why they are useful<\/h3>\n<p>Collapsing margins, though an obscure concept, can come in handy in certain scenarios:<\/p>\n<ul>\n<li>Empty elements don&#8217;t take up their allotted margin area, helping to avoid inconsistent spacing.<\/li>\n<li>Allow for an increased scope of standardization in declaring margins for various page elements.<\/li>\n<li>They also apply to elements which are nested.<\/li>\n<\/ul>\n<h2>4. Download the Source Code<\/h2>\n<p>This was an example for the CSS <code>margin-bottom<\/code> property.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/CSSMarginBottomExample.zip\"><strong>CSSMarginBottomExample.zip<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like padding and margin which help with this. They both essentially add space around an HTML element, but with a key difference. While the padding property adds or increases the &hellip;<\/p>\n","protected":false},"author":1661,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[505,236,114,202],"class_list":["post-19428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bottom","tag-css","tag-css3","tag-margin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Margin Bottom Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like\" \/>\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-bottom-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Margin Bottom Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-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\/JensonJoseOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-12T14:15:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:08:58+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=\"Jenson Jose\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseJenson\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jenson Jose\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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-bottom-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/\"},\"author\":{\"name\":\"Jenson Jose\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/13448ace6851dad5ce8a8990bee47f0e\"},\"headline\":\"CSS Margin Bottom Example\",\"datePublished\":\"2017-12-12T14:15:10+00:00\",\"dateModified\":\"2018-01-08T12:08:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/\"},\"wordCount\":586,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"keywords\":[\"bottom\",\"CSS\",\"css3\",\"margin\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/\",\"name\":\"CSS Margin Bottom Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2017-12-12T14:15:10+00:00\",\"dateModified\":\"2018-01-08T12:08:58+00:00\",\"description\":\"1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-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-bottom-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 Bottom 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\/13448ace6851dad5ce8a8990bee47f0e\",\"name\":\"Jenson Jose\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g\",\"caption\":\"Jenson Jose\"},\"description\":\"Jenson currently works as a Lead Developer on various network automation projects, in one of the leading telecom MNCs. In his spare time, he enjoys reading fiction and gaming.\",\"sameAs\":[\"https:\/\/www.jensonjose.com\",\"https:\/\/www.facebook.com\/JensonJoseOnline\/\",\"https:\/\/x.com\/JoseJenson\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jenson-jose\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Margin Bottom Example - Web Code Geeks - 2026","description":"1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like","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-bottom-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Margin Bottom Example - Web Code Geeks - 2026","og_description":"1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/JensonJoseOnline\/","article_published_time":"2017-12-12T14:15:10+00:00","article_modified_time":"2018-01-08T12:08:58+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":"Jenson Jose","twitter_card":"summary_large_image","twitter_creator":"@JoseJenson","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jenson Jose","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/"},"author":{"name":"Jenson Jose","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/13448ace6851dad5ce8a8990bee47f0e"},"headline":"CSS Margin Bottom Example","datePublished":"2017-12-12T14:15:10+00:00","dateModified":"2018-01-08T12:08:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/"},"wordCount":586,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","keywords":["bottom","CSS","css3","margin"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/","name":"CSS Margin Bottom Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2017-12-12T14:15:10+00:00","dateModified":"2018-01-08T12:08:58+00:00","description":"1. Introduction It is usually a good practice to space out the elements on your web page for easier viewing and readability. CSS provides properties like","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-margin-bottom-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-bottom-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 Bottom 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\/13448ace6851dad5ce8a8990bee47f0e","name":"Jenson Jose","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a00e4452e1e7b6c934a3df74d3174d17a51a6457119f9a36bdf48012e62fa29e?s=96&d=mm&r=g","caption":"Jenson Jose"},"description":"Jenson currently works as a Lead Developer on various network automation projects, in one of the leading telecom MNCs. In his spare time, he enjoys reading fiction and gaming.","sameAs":["https:\/\/www.jensonjose.com","https:\/\/www.facebook.com\/JensonJoseOnline\/","https:\/\/x.com\/JoseJenson"],"url":"https:\/\/www.webcodegeeks.com\/author\/jenson-jose\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19428","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\/1661"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19428"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19428\/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=19428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}