{"id":74184,"date":"2020-01-17T11:41:21","date_gmt":"2020-01-17T06:11:21","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74184"},"modified":"2024-04-12T14:23:20","modified_gmt":"2024-04-12T08:53:20","slug":"margin-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/","title":{"rendered":"Margin"},"content":{"rendered":"<div>It is specified by the various margin property consisting of top, bottom, left, right and the shorthand for margin. It applies space on outside of the box i.e. between the box and the browser window, or between the box and the other elements in the web page. The various margin property are listed as<\/div>\n<div><\/div>\n<ul>\n<li>margin<\/li>\n<li>margin-top<\/li>\n<li>margin-right<\/li>\n<li>margin-bottom<\/li>\n<li>margin-left<\/li>\n<\/ul>\n<div><\/div>\n<div>All of these properties are assigned values in absolute units of length or in percentage. The \u2018margin\u2019 property is a shorthand property for all of the four remaining margin properties. The four remaining properties define specific side of the margin as per their name as<\/div>\n<div>\n<table border=\"1\" width=\"220\" cellspacing=\"0\" cellpadding=\"7\">\n<colgroup>\n<col width=\"105\" \/>\n<col width=\"85\" \/><\/colgroup>\n<tbody>\n<tr valign=\"TOP\">\n<td bgcolor=\"#d9d9d9\" width=\"105\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\"><b>Property<\/b><\/span><\/p>\n<\/td>\n<td bgcolor=\"#d9d9d9\" width=\"85\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\"><b>Margin Side<\/b><\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"105\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">margin-top<\/span><\/p>\n<\/td>\n<td width=\"85\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">Top<\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"105\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">margin-right <\/span><\/p>\n<\/td>\n<td width=\"85\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">Right<\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"105\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">margin-bottom <\/span><\/p>\n<\/td>\n<td width=\"85\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">Bottom<\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"105\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">margin-left <\/span><\/p>\n<\/td>\n<td width=\"85\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">Left<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div>\n<div>These properties are used as<\/div>\n<div><\/div>\n<div>.top {<br \/>\nmargin-top: 30px;\u00a0 margin-left: 50px; margin-bottom: 70px; margin-right: 90px; }<\/div>\n<div>In the margin shorthand property, remaining four are specified in a clockwise order as top, right, bottom, and left.\u00a0 In the example above, there is a 30px margin above the top class selector, 50px\u00a0 in left,\u00a0 70px in bottom and 90px in right. As shown in the figure<\/div>\n<\/div>\n<div><\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-59643\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png\" alt=\"Margin\" width=\"249\" height=\"202\" \/><\/p>\n<div>Variations of margin shorthand are illustrated<\/div>\n<div><\/div>\n<div><strong>margin Property with Four Values<\/strong> \u2013 In this variation of margin shorthand property, value for all four margins are given. Thus it has all four specified in a clockwise sequence of top, right, bottom, and left margin. The example used earlier can be denoted in it as<\/div>\n<div><\/div>\n<div>.top {<br \/>\nmargin: 30px 90px 70px 50px; }<\/div>\n<div><\/div>\n<div><strong>margin Property with Three Values<\/strong> \u2013 The margin shorthand property can also be given by three value if the left and right margin values are the same, then only three values\u00a0 are specified in the margin shorthand property as<\/div>\n<div><\/div>\n<div>.top {<br \/>\nmargin: 70px 100px 50px; }<\/div>\n<div><\/div>\n<div>But still the margin shorthand properties with three values always follow the convention of top, right and left, bottom hence, the first value is for top margin, second for both left and right margins and third for the bottom margin.<\/div>\n<div><\/div>\n<div><strong>margin Property with Two Values<\/strong> \u2013 Only two values can be given to the margin shorthand property where in the first value is for the top and bottom margins and the second value for the right and left margins. It is shown as<\/div>\n<div><\/div>\n<div>.top {<br \/>\nmargin: 50px 100px; }<\/div>\n<div><\/div>\n<div>As explained earlier the shorthand properties with two values again follow the standard top and bottom, right and left\u00a0 and hence, the first value of 50px is for. top and bottom and 100px for right and left.<\/div>\n<div><\/div>\n<\/div>\n<div>\n<div><strong>margin Property with One Value<\/strong> \u2013 Even one value can be given for the margin shorthand property, which is applicable for all four sides of an element\u2019s margin and is given as<\/div>\n<div><\/div>\n<div>.top {<br \/>\nmargin: 50px; }<\/div>\n<div>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/h5>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>It is specified by the various margin property consisting of top, bottom, left, right and the shorthand for margin. It applies space on outside of the box i.e. between the box and the browser window, or between the box and the other elements in the web page. The various margin property are listed as margin&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1808],"class_list":["post-74184","page","type-page","status-publish","hentry","category-css3","tag-margin"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Margin - Tutorial<\/title>\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.vskills.in\/certification\/tutorial\/margin-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Margin - Tutorial\" \/>\n<meta property=\"og:description\" content=\"It is specified by the various margin property consisting of top, bottom, left, right and the shorthand for margin. It applies space on outside of the box i.e. between the box and the browser window, or between the box and the other elements in the web page. The various margin property are listed as margin...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/\",\"name\":\"Margin - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png\",\"datePublished\":\"2020-01-17T06:11:21+00:00\",\"dateModified\":\"2024-04-12T08:53:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Margin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Margin - Tutorial","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.vskills.in\/certification\/tutorial\/margin-2\/","og_locale":"en_US","og_type":"article","og_title":"Margin - Tutorial","og_description":"It is specified by the various margin property consisting of top, bottom, left, right and the shorthand for margin. It applies space on outside of the box i.e. between the box and the browser window, or between the box and the other elements in the web page. The various margin property are listed as margin...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:20+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/","name":"Margin - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png","datePublished":"2020-01-17T06:11:21+00:00","dateModified":"2024-04-12T08:53:20+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Margin"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74184"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74184\/revisions"}],"predecessor-version":[{"id":85608,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74184\/revisions\/85608"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}