{"id":23,"date":"2012-05-04T23:59:50","date_gmt":"2012-05-04T23:59:50","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=23"},"modified":"2016-03-29T01:36:55","modified_gmt":"2016-03-29T01:36:55","slug":"css-box-model-padding","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/css-box-model-padding\/","title":{"rendered":"CSS Lesson 4: Understanding The Box Model Part 1: Padding"},"content":{"rendered":"<p>In our <a title=\"Create Your First CSS File\" href=\"https:\/\/learnwebcode.com\/how-to-create-your-first-css-file\/\">previous lesson<\/a> we learned the basic syntax of CSS code.\u00a0 We are now able to apply basic styles like defining a color or center aligning text.\u00a0 But before we can learn advanced CSS techniques we must study what is known as \u201c<strong>The CSS Box Model<\/strong>.\u201d<\/p>\n<h2>Elements Are Rectangles<\/h2>\n<p>First, you will need to begin thinking of every XHTML element as a rectangle (or box).\u00a0 We style our boxes by assigning properties such as widths, margins, borders and padding.\u00a0 Our goal for today is to understand the CSS property <strong>&#8220;padding&#8221;<\/strong> and how it affects our elements.\u00a0 I have created a graphic to help visualize the padding property:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif\" alt=\"A graphic explanation of CSS Padding\" \/><\/p>\n<p>As the graphic hopefully conveys, padding is used to create space between the edge of our HTML element, and the content (usually text) that the element houses.<\/p>\n<h2>Padding Affects The Width of Elements<\/h2>\n<p>One of the trickiest aspects of CSS is keeping track of the \u201ctrue\u201d width of your elements.\u00a0 For example, how do things like padding, borders and margins affect the width of an element?\u00a0 Let\u2019s begin coding to discover our answer.\u00a0 I encourage you to follow along in your own text editor.<\/p>\n<h3>Our First &lt;div&gt; Is Our Base<\/h3>\n<p>First, let\u2019s create a <strong>&lt;div&gt;<\/strong> element with an ID of \u201cbase\u201d and include some text inside of it.\u00a0 Here\u2019s the XHTML code we\u2019ll insert into a new web page.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div id=&quot;base&quot;&gt;\r\n    This is 300 pixels wide.\r\n&lt;\/div&gt;<\/pre>\n<p>Now, let\u2019s make our \u201cbase\u201d 300 pixels wide and give it a background color so we can easily see its width in our web browser.\u00a0 Here is the CSS code we\u2019ll insert into our CSS file:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">#base {\r\n    width: 300px;\r\n    background-color: yellow;\r\n}<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-01.gif\" alt=\"CSS Padding 1\" \/><\/p>\n<p>Now if we view our webpage in a web browser we\u2019ll see a yellow box which measures 300 pixels wide.<\/p>\n<h2>The &#8220;Experiment&#8221; &lt;div&gt;<\/h2>\n<p>Let\u2019s create a second &lt;div&gt; with an ID of \u201cexperiment\u201d and place it directly below our base.\u00a0 We\u2019ll use this new &lt;div&gt; to test properties like padding, margin, and border. \u00a0\u00a0Here is the XHTML code you\u2019ll add:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div id=&quot;experiment&quot;&gt;\r\n    This is the experiment.\r\n&lt;\/div&gt;<\/pre>\n<p>Next, we\u2019ll give our experiment &lt;div&gt; a width of 300 pixels, a background color of orange, and 10 pixels of padding:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">#experiment {\r\n    width: 300px;\r\n    background-color: orange;\r\n    padding:\u00a0 10px;\r\n}<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-02.gif\" alt=\"CSS Padding 2\" \/><\/p>\n<h2>Unequal Widths<\/h2>\n<p>When we refresh our page in a web browser we see that our new orange &lt;div&gt; is wider than our first &lt;div&gt;.\u00a0 We assigned it the same width of 300 pixels but our 10 pixels of padding tipped the scales.\u00a0 Notice how our text in the orange box is 10 pixels inside the left edge of the &lt;div&gt; element?\u00a0 There is also 10 pixels of padding on the right side of our box, so overall our new box is 20 pixels wider than our gray base.<\/p>\n<h2>Making the Widths Equal<\/h2>\n<p>Let\u2019s pretend we want our orange &lt;div&gt; to match our gray &lt;div&gt; in width.\u00a0 This requires us to lower the width value of the orange &lt;div&gt; by 20 pixels to compensate for the padding we added. \u00a0\u00a0Let\u2019s edit our CSS width declaration for our experiment &lt;div&gt;:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">#experiment {\r\n    width: 280px;\r\n    background-color: orange;\r\n    padding:\u00a0 10px;\r\n}<\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-03.gif\" alt=\"CSS Padding 3\" \/><\/p>\n<p>When we refresh our page in a web browser we see that the two &lt;div&gt; elements are now equal in width.\u00a0 We now have a basic understanding of how the \u201cpadding\u201d property works.\u00a0 It gives the content inside an element, in this case our text, room to breathe from the edge of the element.\u00a0 Padding also changes the width of an element and we learned how to use some basic arithmetic to keep our elements even.<\/p>\n<p>In our next lesson we will continue to examine the CSS Box Model by learning about the \u201cmargin\u201d property.<\/p>\n<p>If you prefer to watch video lessons instead of reading written lessons check out <a href=\"\/web-design-for-beginners-real-world-coding-html-css\/\">my 8 hour video course<\/a> and learn pro-level HTML, CSS, and responsive design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our previous lesson we learned the basic syntax of CSS code.\u00a0 We are now able to apply basic styles like defining a color or center aligning text.\u00a0 But before we can learn advanced CSS techniques we must study what is known as \u201cThe CSS Box Model.\u201d Elements Are Rectangles First, you will need to [&hellip;]<\/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-23","post","type-post","status-publish","format-standard","hentry","category-css-lessons"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Lesson 4: Understanding The Box Model Part 1: Padding - 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-box-model-padding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Lesson 4: Understanding The Box Model Part 1: Padding - LearnWebCode\" \/>\n<meta property=\"og:description\" content=\"In our previous lesson we learned the basic syntax of CSS code.\u00a0 We are now able to apply basic styles like defining a color or center aligning text.\u00a0 But before we can learn advanced CSS techniques we must study what is known as \u201cThe CSS Box Model.\u201d Elements Are Rectangles First, you will need to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnwebcode.com\/css-box-model-padding\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnWebCode\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-04T23:59:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-29T01:36:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/\"},\"author\":{\"name\":\"Brad\",\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"headline\":\"CSS Lesson 4: Understanding The Box Model Part 1: Padding\",\"datePublished\":\"2012-05-04T23:59:50+00:00\",\"dateModified\":\"2016-03-29T01:36:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/\"},\"wordCount\":699,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"image\":{\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif\",\"articleSection\":[\"CSS Lessons\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/learnwebcode.com\/css-box-model-padding\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/\",\"url\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/\",\"name\":\"CSS Lesson 4: Understanding The Box Model Part 1: Padding - LearnWebCode\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif\",\"datePublished\":\"2012-05-04T23:59:50+00:00\",\"dateModified\":\"2016-03-29T01:36:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnwebcode.com\/css-box-model-padding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage\",\"url\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif\",\"contentUrl\":\"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnwebcode.com\/css-box-model-padding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnwebcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Lesson 4: Understanding The Box Model Part 1: Padding\"}]},{\"@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 4: Understanding The Box Model Part 1: Padding - 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-box-model-padding\/","og_locale":"en_US","og_type":"article","og_title":"CSS Lesson 4: Understanding The Box Model Part 1: Padding - LearnWebCode","og_description":"In our previous lesson we learned the basic syntax of CSS code.\u00a0 We are now able to apply basic styles like defining a color or center aligning text.\u00a0 But before we can learn advanced CSS techniques we must study what is known as \u201cThe CSS Box Model.\u201d Elements Are Rectangles First, you will need to [&hellip;]","og_url":"https:\/\/learnwebcode.com\/css-box-model-padding\/","og_site_name":"LearnWebCode","article_published_time":"2012-05-04T23:59:50+00:00","article_modified_time":"2016-03-29T01:36:55+00:00","og_image":[{"url":"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif","type":"","width":"","height":""}],"author":"Brad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brad","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#article","isPartOf":{"@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/"},"author":{"name":"Brad","@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"headline":"CSS Lesson 4: Understanding The Box Model Part 1: Padding","datePublished":"2012-05-04T23:59:50+00:00","dateModified":"2016-03-29T01:36:55+00:00","mainEntityOfPage":{"@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/"},"wordCount":699,"commentCount":7,"publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"image":{"@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage"},"thumbnailUrl":"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif","articleSection":["CSS Lessons"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnwebcode.com\/css-box-model-padding\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/","url":"https:\/\/learnwebcode.com\/css-box-model-padding\/","name":"CSS Lesson 4: Understanding The Box Model Part 1: Padding - LearnWebCode","isPartOf":{"@id":"https:\/\/learnwebcode.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage"},"image":{"@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage"},"thumbnailUrl":"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif","datePublished":"2012-05-04T23:59:50+00:00","dateModified":"2016-03-29T01:36:55+00:00","breadcrumb":{"@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnwebcode.com\/css-box-model-padding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#primaryimage","url":"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif","contentUrl":"https:\/\/learnwebcode.com\/images\/lessons\/css-padding-graph.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/learnwebcode.com\/css-box-model-padding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnwebcode.com\/"},{"@type":"ListItem","position":2,"name":"CSS Lesson 4: Understanding The Box Model Part 1: Padding"}]},{"@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\/23","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=23"}],"version-history":[{"count":10,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/23\/revisions\/1011"}],"wp:attachment":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}