{"id":5675,"date":"2017-11-20T09:29:40","date_gmt":"2017-11-20T14:29:40","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=5675"},"modified":"2021-12-07T16:43:06","modified_gmt":"2021-12-07T21:43:06","slug":"css-margin-vs-padding","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/","title":{"rendered":"When to Use Margin vs Padding in CSS"},"content":{"rendered":"\n

Though it may not be an age-old question, it so happens to decide when to use margin vs padding may not be as trivial for some.<\/p>\n\n\n\n

Inexperienced web designers may get caught up in a spacy situation when trying to craft elegant CSS<\/a> to not only impress the users but to deal with all the responsive media queries.<\/p>\n\n\n\n

it does not help that in many cases the end effect of using either seemingly produces the same result. It this is truly the case, the question begs. Why did the designers of CSS decide they need both a margin and a padding property?<\/p>\n\n\n\n

What’s the Difference Between Margin vs Padding?<\/h2>\n\n\n\n

Margin:<\/strong><\/p>\n\n\n\n

The CSS margin is used to regulate the space around an HTML element. This space would be described as the white space surrounding the element’s border or boundary.<\/p>\n\n\n\n

The aim of the margin is to how much space there should be between the subject element and other elements surrounding it.<\/p>\n\n\n\n

The space around the element can be defined equally around all sides (top, right, bottom, and left) or they can be set individually.<\/p>\n\n\n\n

Padding:<\/strong><\/p>\n\n\n\n

The CSS padding property is used to control the space around content within an element. The space in question here lies within the border of the element.<\/p>\n\n\n\n

Just like the CSS margins, you can set the padding within elements equally at the top, right, bottom, and left sides or you can set them individually.<\/p>\n\n\n\n

Basically, the padding property clears the content from the containing box while margin clears the containing box from other elements.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Some Practical Use Cases for Margin vs Padding<\/h2>\n\n\n\n

1. One ideal place you can use padding vs margin is when you want the white space around the content to retain the same color as the content.<\/p>\n\n\n\n

A good example is when you want to use, tabs, pills, etc where you use mouseover effects to change the content color with a space allowance.<\/p>\n\n\n\n

2. An ideal place to use margin is where you do not want to tamper with the layout of the content. The padding takes space inwards. This, however, depends on whether you are using a box-sizing with content-box or border-box. Check out this article on box-sizing for more details<\/a>.<\/p>\n\n\n\n

3. You can add additional styling to the border and content. A good example would be around images where you might want some white space to complement a visible border.<\/p>\n\n\n\n

This is also true for other element types where you make the border visible. In almost all of these cases, you may want to add some padding for aesthetics. Where the border is kept invisible it may not matter.<\/p>\n\n\n\n

And now for those with the creative bone, however you best you achieve your goals (in the most efficient way) could make a case for the reasons you choose to use margin vs padding. As we know in CSS, creative use of properties on various elements has seen some very clever UI effects come into practice.<\/p>\n\n\n\n

Ref: [ 1<\/a> ]<\/p>\n","protected":false},"excerpt":{"rendered":"

Though it may not be an age-old question, it so happens to decide when to use margin vs padding may not be as trivial for some. Inexperienced web designers may…<\/p>\n","protected":false},"author":1,"featured_media":5678,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,16,17],"tags":[106,170,189,303,319,543,635,637,643],"yoast_head":"\nMargin vs Padding in CSS Explained, the Ultimate Guild<\/title>\n<meta name=\"description\" content=\"Here we explain when you should use CSS margin vs padding and we explain the differences between the two properties and how to leverage them\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Margin vs Padding in CSS Explained, the Ultimate Guild\" \/>\n<meta property=\"og:description\" content=\"Here we explain when you should use CSS margin vs padding and we explain the differences between the two properties and how to leverage them\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-20T14:29:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-07T21:43:06+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"When to Use Margin vs Padding in CSS\",\"datePublished\":\"2017-11-20T14:29:40+00:00\",\"dateModified\":\"2021-12-07T21:43:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\"},\"wordCount\":502,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg\",\"keywords\":[\"Browsers\",\"CSS\",\"Design\",\"HTML\",\"Interactive Technics\",\"Software Design\",\"Web\",\"Web Design\",\"Websites\"],\"articleSection\":[\"Articles\",\"Guides\",\"Technology\",\"Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\",\"url\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\",\"name\":\"Margin vs Padding in CSS Explained, the Ultimate Guild\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg\",\"datePublished\":\"2017-11-20T14:29:40+00:00\",\"dateModified\":\"2021-12-07T21:43:06+00:00\",\"description\":\"Here we explain when you should use CSS margin vs padding and we explain the differences between the two properties and how to leverage them\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"When to Use Margin vs Padding in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Margin vs Padding in CSS Explained, the Ultimate Guild","description":"Here we explain when you should use CSS margin vs padding and we explain the differences between the two properties and how to leverage them","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":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/","og_locale":"en_US","og_type":"article","og_title":"Margin vs Padding in CSS Explained, the Ultimate Guild","og_description":"Here we explain when you should use CSS margin vs padding and we explain the differences between the two properties and how to leverage them","og_url":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-11-20T14:29:40+00:00","article_modified_time":"2021-12-07T21:43:06+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"When to Use Margin vs Padding in CSS","datePublished":"2017-11-20T14:29:40+00:00","dateModified":"2021-12-07T21:43:06+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/"},"wordCount":502,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg","keywords":["Browsers","CSS","Design","HTML","Interactive Technics","Software Design","Web","Web Design","Websites"],"articleSection":["Articles","Guides","Technology","Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/","url":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/","name":"Margin vs Padding in CSS Explained, the Ultimate Guild","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg","datePublished":"2017-11-20T14:29:40+00:00","dateModified":"2021-12-07T21:43:06+00:00","description":"Here we explain when you should use CSS margin vs padding and we explain the differences between the two properties and how to leverage them","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/css-margin-vs-padding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/11\/margin-vs-padding.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/css-margin-vs-padding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"When to Use Margin vs Padding in CSS"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/5675"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=5675"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/5675\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/5678"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=5675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=5675"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=5675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}