{"id":27,"date":"2012-05-05T00:00:54","date_gmt":"2012-05-05T00:00:54","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=27"},"modified":"2016-03-29T01:37:21","modified_gmt":"2016-03-29T01:37:21","slug":"css-shorthand-padding-margin","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/","title":{"rendered":"CSS Lesson 6: Shorthand Properties (Padding and Margin)"},"content":{"rendered":"

The padding and margin CSS properties are essential in building web layouts.\u00a0 Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element.\u00a0 If you are a beginner, this is the code you would likely use:<\/p>\n

\r\n#header {\r\n    padding-top: 10px;\r\n    padding-right: 15px;\r\n    padding-bottom: 6px;\r\n    padding-left: 15px;\r\n}\r\n<\/pre>\n
However, there is a much more efficient (not to mention easier!) way of applying four padding or margin values.  Here is your first glimpse of CSS Shorthand<\/strong> in action; the following code achieves the same exact results as the padding example I just provided:<\/p>\n
\"CSS<\/p>\n
You simply list four values, one directly after the other, and the web browser interprets this as the four (clockwise- top, right, bottom, left) directional values.<\/p>\n
Similarly, you can also list two values in a row and the browser will interpret the first to be both top and bottom<\/strong>, and the second value to be both left and right<\/strong>.<\/p>\n
\"CSS<\/p>\n
Using this new knowledge, let’s imagine we need to add 10 pixels of right margin and 15 pixels of bottom margin to an element.  Here’s the code we would use:<\/p>\n
\r\n#header {\r\n    margin: 0 10px 15px 0;\r\n}\r\n<\/pre>\n
We used the four-value shorthand syntax, and simply included zeroes for the directions (top and left) we didn’t want to apply margin to.<\/p>\n
That’s it for today’s lesson.   Hopefully your CSS code will be a little cleaner with these simple shorthand methods.<\/p>\n
If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course<\/a> and learn pro-level HTML, CSS, and responsive design.<\/p>\n","protected":false},"excerpt":{"rendered":"
The padding and margin CSS properties are essential in building web layouts.\u00a0 Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element.\u00a0 If you are a beginner, this is the code you would likely use: #header { padding-top: 10px; padding-right: 15px; padding-bottom: 6px; padding-left: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-css-lessons"],"yoast_head":"\nCSS Lesson 6: Shorthand Properties (Padding and Margin) - LearnWebCode<\/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:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Lesson 6: Shorthand Properties (Padding and Margin) - LearnWebCode\" \/>\n<meta property=\"og:description\" content=\"The padding and margin CSS properties are essential in building web layouts.\u00a0 Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element.\u00a0 If you are a beginner, this is the code you would likely use: #header { padding-top: 10px; padding-right: 15px; padding-bottom: 6px; padding-left: […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnWebCode\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-05T00:00:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-29T01:37:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif\" \/>\n<meta name=\"author\" content=\"Brad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\"},\"author\":{\"name\":\"Brad\",\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"headline\":\"CSS Lesson 6: Shorthand Properties (Padding and Margin)\",\"datePublished\":\"2012-05-05T00:00:54+00:00\",\"dateModified\":\"2016-03-29T01:37:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\"},\"wordCount\":274,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"image\":{\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif\",\"articleSection\":[\"CSS Lessons\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\",\"url\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\",\"name\":\"CSS Lesson 6: Shorthand Properties (Padding and Margin) - LearnWebCode\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif\",\"datePublished\":\"2012-05-05T00:00:54+00:00\",\"dateModified\":\"2016-03-29T01:37:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage\",\"url\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif\",\"contentUrl\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnwebcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Lesson 6: Shorthand Properties (Padding and Margin)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnwebcode.com\/#website\",\"url\":\"https:\/\/learnwebcode.com\/\",\"name\":\"LearnWebCode\",\"description\":\"Become a Web Developer\",\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnwebcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\",\"name\":\"Brad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"url\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"contentUrl\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"width\":400,\"height\":400,\"caption\":\"Brad\"},\"logo\":{\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\"},\"url\":\"https:\/\/learnwebcode.com\/author\/lwcadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Lesson 6: Shorthand Properties (Padding and Margin) - LearnWebCode","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:\/\/learnwebcode.com\/css-shorthand-padding-margin\/","og_locale":"en_US","og_type":"article","og_title":"CSS Lesson 6: Shorthand Properties (Padding and Margin) - LearnWebCode","og_description":"The padding and margin CSS properties are essential in building web layouts.\u00a0 Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element.\u00a0 If you are a beginner, this is the code you would likely use: #header { padding-top: 10px; padding-right: 15px; padding-bottom: 6px; padding-left: […]","og_url":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/","og_site_name":"LearnWebCode","article_published_time":"2012-05-05T00:00:54+00:00","article_modified_time":"2016-03-29T01:37:21+00:00","og_image":[{"url":"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif","type":"","width":"","height":""}],"author":"Brad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brad","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#article","isPartOf":{"@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/"},"author":{"name":"Brad","@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"headline":"CSS Lesson 6: Shorthand Properties (Padding and Margin)","datePublished":"2012-05-05T00:00:54+00:00","dateModified":"2016-03-29T01:37:21+00:00","mainEntityOfPage":{"@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/"},"wordCount":274,"commentCount":8,"publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"image":{"@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage"},"thumbnailUrl":"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif","articleSection":["CSS Lessons"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/","url":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/","name":"CSS Lesson 6: Shorthand Properties (Padding and Margin) - LearnWebCode","isPartOf":{"@id":"https:\/\/learnwebcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage"},"image":{"@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage"},"thumbnailUrl":"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif","datePublished":"2012-05-05T00:00:54+00:00","dateModified":"2016-03-29T01:37:21+00:00","breadcrumb":{"@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#primaryimage","url":"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif","contentUrl":"https:\/\/learnwebcode.com\/images\/lessons\/css-shorthand-1.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/learnwebcode.com\/css-shorthand-padding-margin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnwebcode.com\/"},{"@type":"ListItem","position":2,"name":"CSS Lesson 6: Shorthand Properties (Padding and Margin)"}]},{"@type":"WebSite","@id":"https:\/\/learnwebcode.com\/#website","url":"https:\/\/learnwebcode.com\/","name":"LearnWebCode","description":"Become a Web Developer","publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnwebcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6","name":"Brad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","url":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","contentUrl":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","width":400,"height":400,"caption":"Brad"},"logo":{"@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg"},"url":"https:\/\/learnwebcode.com\/author\/lwcadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":10,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":1013,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/27\/revisions\/1013"}],"wp:attachment":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}