{"id":15617,"date":"2018-09-18T16:27:13","date_gmt":"2018-09-18T20:27:13","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15617"},"modified":"2020-05-01T15:51:57","modified_gmt":"2020-05-01T19:51:57","slug":"difference-padding-margin","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/difference-padding-margin\/","title":{"rendered":"The Difference Between Padding &#038; Margin"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15515\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image.png\" alt=\"\" width=\"800\" height=\"72\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image-300x27.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image-768x69.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image-250x23.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image-550x50.png 550w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Many of the advanced controls of the WordPress Post and <a href=\"https:\/\/www.boldgrid.com\/wordpress-page-builder-by-boldgrid\/\">Page Builder plugin<\/a> include <b>Padding <\/b>and <b>Margin<\/b>. The image below helps illustrate the difference. The blue represents a Column and the orange is a content container. When working with an element in the content container, the <b>Padding <\/b>increases the space between your element and the content container border. Adding <b>Margin<\/b> increases the space between the content container border and the edges of the column itself.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15618\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding.png\" alt=\"\" width=\"1200\" height=\"500\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding.png 1200w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-300x125.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-768x320.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-1024x427.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-250x104.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-550x229.png 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-800x333.png 800w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-432x180.png 432w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/margin-padding-720x300.png 720w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<ul>\n<li><b>Padding <\/b>is the space outside the content and inside the content container<\/li>\n<li><b>Margin <\/b>is the space outside the content container and extends to the edges of a Column, Row, Section, or sides of the website itself<\/li>\n<\/ul>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Many of the advanced controls of the WordPress Post and Page Builder plugin include Padding and Margin. The image below helps illustrate the difference. The blue represents a Column and the orange is a content container. When working with an element in the content container, the Padding increases the space between your element and the [&hellip;]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-15617","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15617"}],"version-history":[{"count":3,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15617\/revisions"}],"predecessor-version":[{"id":20480,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15617\/revisions\/20480"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}