{"id":578,"date":"2017-03-16T14:26:36","date_gmt":"2017-03-16T14:26:36","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=578"},"modified":"2017-03-29T16:07:44","modified_gmt":"2017-03-29T10:37:44","slug":"use-margin-vs-padding-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/use-margin-vs-padding-css\/","title":{"rendered":"CSS &#8211; When to use margin vs padding in CSS"},"content":{"rendered":"<p>In CSS, the two properties that makes spacing possible are padding and margin.<\/p>\n<ul>\n<li>The padding represents the inner space of an element<\/li>\n<li>The margin is external<\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-579 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/boder-300x108.png\" alt=\"\" width=\"492\" height=\"177\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/boder-300x108.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/boder.png 1174w\" sizes=\"(max-width: 492px) 100vw, 492px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Explanation of the different parts:<\/strong><\/p>\n<p><strong>Content<\/strong> &#8211; The content of the box, where text and images appear<br \/>\n<strong>Padding<\/strong> &#8211; Clears an area around the content. The padding is transparent<br \/>\n<strong>Border<\/strong> &#8211; A border that goes around the padding and content<br \/>\n<strong>Margin<\/strong> &#8211; Clears an area outside the border. The margin is transparent<\/p>\n<p><strong>Difference between margin and padding. <\/strong><\/p>\n<ul>\n<li>Margin is outer space of an element, while Padding is inner space of an element.<\/li>\n<li>Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.<\/li>\n<li>Margin can be value auto: margin: auto, but you can&#8217;t give Padding the value of auto.<\/li>\n<li>Margin can give value of positive or negative (or zero), otherwise, Padding must be positive (or zero).<\/li>\n<li>In navigation bars or anchors (links) and other tags, Padding is a part of element that accepts changes. When you style an element, changes not occurs to Margin, but the space that Padding has created will be change.<\/li>\n<\/ul>\n<p><strong>Tips:<\/strong> You can see these differences on some tags that you use to control other tags; like div and span, or section and article<\/p>\n[ad type=&#8221;banner&#8221;]\n<p><strong>Padding Property: <\/strong><\/p>\n<ul>\n<li>The CSS padding properties define the space between the element border and the element content.<\/li>\n<\/ul>\n<p>You can define the padding value the following way:<\/p>\n<ul>\n<li>padding-top: 10px;<\/li>\n<li>padding-right: 10px;<\/li>\n<li>padding-bottom: 10px;<\/li>\n<li>padding-left: 10px;<\/li>\n<\/ul>\n<p>You can also use the shortand property:<\/p>\n<p><strong>padding:30px 55px 80px 110px;<\/strong><\/p>\n<ul>\n<li>top padding is 30px<\/li>\n<li>right padding is 55px<\/li>\n<li>bottom padding is 80px<\/li>\n<li>left padding is 110px<\/li>\n<\/ul>\n<p><strong>padding:30px 55px 80px;<\/strong><\/p>\n<ul>\n<li>top padding is 30px<\/li>\n<li>right and left paddings are 55px<\/li>\n<li>bottom padding is 80px<\/li>\n<\/ul>\n<p><b>padding:30px 55px;<\/b><\/p>\n<ul>\n<li>top and bottom paddings are 30px<\/li>\n<li>right and left paddings are 55px<\/li>\n<\/ul>\n<p><b>padding:25px;<\/b><\/p>\n<ul>\n<li>all four paddings are 25px<\/li>\n<\/ul>\n<p><strong>Padding example program:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;style type=&quot;text\/css&quot;&gt;<br\/>div.wiki<br\/>{<br\/>width:200px;<br\/>border-style: solid;<br\/>border-width:thin;<br\/>border-color:#000;<br\/>padding:30px 20px 10px 25px;<br\/>}<br\/>&lt;\/style&gt;<br\/>&lt;div class=\u201cwiki&quot;&gt;<br\/>Welcome to Wikitechy..<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><strong>margin Property: <\/strong><\/p>\n<ul>\n<li>CSS margin properties define the space around elements.<\/li>\n<li>The margin clears an area around an element (outside the border).<\/li>\n<li>The margin does not have a background color, and is completely transparent.<\/li>\n<\/ul>\n<p>You can define the element margin values the following way:<\/p>\n<ul>\n<li>margin-top:100px;<\/li>\n<li>margin-bottom:100px;<\/li>\n<li>margin-right:50px;<\/li>\n<li>margin-left:50px;<\/li>\n<\/ul>\n<p>You can also use the shortand property:<\/p>\n<p><strong>margin:35px 60px 85px 110px;<\/strong><\/p>\n<p>top margin is 35px<br \/>\nright margin is 60px<br \/>\nbottom margin is 85px<br \/>\nleft margin is 110px<\/p>\n<p><strong>margin:35px 60px 85px;<\/strong><br \/>\ntop margin is 35px<br \/>\nright and left margins are 60px<br \/>\nbottom margin is 85px<\/p>\n<p><strong>margin:35px 60px;<\/strong><br \/>\ntop and bottom margins are 35px<br \/>\nright and left margins are 60px<\/p>\n<p><strong>margin:25px;<\/strong><br \/>\nall four margins are 25px<\/p>\n<p><strong>Margin Example Program:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;style type=&quot;text\/css&quot;&gt;<br\/>div.wiki<br\/>  {<br\/>      width:200px;<br\/>      border-style: solid;<br\/>      border-width:thin;<br\/>      border-color:#000;<br\/>     margin:30px 20px 10px 25px;<br\/>  }<br\/>&lt;\/style&gt;<br\/>&lt;div class=\u201cwiki&quot;&gt;<br\/>\t Welcome to Wikitechy..<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n","protected":false},"excerpt":{"rendered":"<p>In CSS, the two properties that makes spacing possible are padding and margin. The padding represents the inner space of an element The margin is external &nbsp; Explanation of the different parts: Content &#8211; The content of the box, where text and images appear Padding &#8211; Clears an area around the content. The padding is [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[1066,1067,1069,1077,1072,1070,1076,1078,1071,1063,1074,1065,1075,1068,1062,1064,1073],"class_list":["post-578","post","type-post","status-publish","format-standard","hentry","category-css","tag-css-box-model","tag-css-spacing-margin-vs-padding","tag-css-understanding-border","tag-html-margin","tag-margin-and-padding-in-css","tag-margin-and-padding-properties","tag-margin-in-css","tag-margin-padding","tag-margin-vs-padding-css","tag-margin-vs-padding","tag-padding-vs-margin-android","tag-padding-vs-margin-for-web-design-spacing","tag-padding-vs-margin-wpf","tag-whats-the-difference-between-margin-and-padding","tag-when-to-use-margin-vs-padding-in-css","tag-when-to-use-margins-and-padding","tag-which-two-types-of-positioning-remove-an-element-from-the-natural-flow-of-the-document"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/578\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}