{"id":1165,"date":"2021-03-30T20:35:44","date_gmt":"2021-03-30T20:35:44","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=1165"},"modified":"2021-03-31T15:46:42","modified_gmt":"2021-03-31T15:46:42","slug":"padding-margin-alignment","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/padding-margin-alignment\/","title":{"rendered":"Padding\/Margin\/Alignment"},"content":{"rendered":"\n<h6>General<\/h6>\n\n\n\n<p>Designers use the terms padding and margin space interchangeably. <\/p>\n\n\n\n<p>Developers the box model for the site is content-box. <\/p>\n\n\n\n<p>As a general rule padding and margins are divisible by increments of five. For example, modal would be 300px wide, with a margin of 60px and padding of 15px. All of those numbers are divisible by five.<\/p>\n\n\n\n<h6>Padding and Margin<\/h6>\n\n\n\n<p>It&#8217;s considered good practice to have margin and padding space around elements and components. For example, you will never see paragraph text that sits against the edge of the screen on a device. There should always be some space between elements.<\/p>\n\n\n\n<div class=\"is-layout-flow wp-block-group d-inline-block\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Incorrect<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large border\"><img decoding=\"async\" loading=\"lazy\" width=\"375\" height=\"644\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/Padding-Margin-incorrect.png\" alt=\"\" class=\"wp-image-1170\" srcset=\"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Padding-Margin-incorrect.png 375w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Padding-Margin-incorrect-175x300.png 175w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"is-layout-flow wp-block-group d-inline-block\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Correct<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large border\"><img decoding=\"async\" loading=\"lazy\" width=\"375\" height=\"644\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/Padding-Margin-correct.png\" alt=\"\" class=\"wp-image-1173\" srcset=\"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Padding-Margin-correct.png 375w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Padding-Margin-correct-175x300.png 175w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<h6>Alignment<\/h6>\n\n\n\n<p>In general, designs will use alignment to help users understand and read the information on the page with ease. Alignment of elements give a sense of order to the page therefore use alignment to create visual harmony. Alignment of elements along X and Y axis take the form of <em>left, right, center<\/em> (X-axis) and <em>top, bottom, center<\/em> (Y-axis). Elements that do not use alignment should be avoided.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>General Designers use the terms padding and margin space interchangeably. Developers the box model for the site is content-box. As a general rule padding and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/1165"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=1165"}],"version-history":[{"count":24,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/1165\/revisions"}],"predecessor-version":[{"id":1195,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/1165\/revisions\/1195"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=1165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}