{"id":17404,"date":"2021-01-10T00:53:35","date_gmt":"2021-01-10T08:53:35","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=17404"},"modified":"2023-12-01T04:07:55","modified_gmt":"2023-12-01T12:07:55","slug":"css-box-model","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-box-model\/","title":{"rendered":"CSS Box Model: A How-To Guide"},"content":{"rendered":"\n<p><em>The browser uses the CSS box model to determine how an element should appear on a web page. The box model represents the size of an element and its border, padding, and margins. You can style each of these elements individually.<\/em><\/p>\n\n\n\n<p>Every element is surrounded by a box. Being able to understand how these boxes work is an essential part of positioning items in the way you want on a web page.<\/p>\n\n\n\n<p>The CSS box model is used to determine how a box should appear, and how it should be positioned, on a web page. This model refers to the four components\u2014content, padding, border, and margin\u2014that make up a box in CSS. This tutorial will discuss the basics of the CSS box model and its main parts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Box Model<\/h2>\n\n\n\n<p>The CSS box model is the structure applied to all boxes in CSS. This box model instructs the browser on how the different parts of a box create an element that will appear on the web page. The box model represents the content, padding, border, and margin of a box.<\/p>\n\n\n\n<p>Let&#8217;s take a look at each element of the box model:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Content. The content of the box, where text, forms, images, and other web elements will appear.<\/li><li>Padding. The space between the contents of a box and the border of the box. The padding for a box is transparent.<\/li><li>Border. The border that goes around the content of a box, or around the padding of a box if a padding value is specified.<\/li><li>Margin. The space between the outer edge of a border and other elements on a web page. The padding for a box is transparent.<\/li><\/ul>\n\n\n\n<p>Let\u2019s discuss each of these components and how to use them one-by-one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Content Area<\/h2>\n\n\n\n<p>The content area is at the center of the box model. This is where text, images, and other elements appear in a web element. We use the height and width CSS properties to determine the size of the content area.<\/p>\n\n\n\n<p>By default, the size of a content area will be equal to the size of its elements. If you have a line of text, the box will be as long and as tall as the line of text.<\/p>\n\n\n\n<p>Suppose we want to design a box that is 200px tall by 200px wide. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n\n&lt;p&gt;This is a box.&lt;\/p&gt;\n\n&lt;\/html&gt;\n\n&lt;style&gt;\n\np {\n\theight: 200px;\n\twidth: 200px;\n}\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We used an <a href=\"https:\/\/careerkarma.com\/blog\/basic-html-tags\/\">HTML &lt;p&gt;<\/a><a href=\"https:\/\/careerkarma.com\/blog\/basic-html-tags\/\"> tag<\/a> to create a paragraph of text. Remember, every element in web design is in a box, so the box model will apply to our &lt;p&gt; tag. In our CSS code, we create a rule that sets the height of all &lt;p&gt; tags to 200px. We also set the width of all &lt;p&gt; tags to 200px.\n\n<\/p>\n\n\n\n<p>To learn more about width and height, and the CSS content area, read our beginner\u2019s guide to <a href=\"https:\/\/careerkarma.com\/blog\/css-height-and-width\">CSS height and width<\/a>.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Padding Area<\/h2>\n\n\n\n<p>The padding area extends the content area. It creates a gap between the contents of a box and its border. Padding is often used to create banners and other announcement elements on a web page.\n\n<\/p>\n\n\n\n<p>To apply padding to a box, we can use the <a href=\"https:\/\/careerkarma.com\/blog\/css-padding\/\">CSS padding property<\/a>. Suppose we want to apply a 25px padding around our last box. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n\n&lt;p&gt;This is a box.&lt;\/p&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n\np {\n\theight: 200px;\n\twidth: 200px;\n\tpadding: 20px;\n}\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We specified the \u201cpadding\u201d property and set its value to 20px. This creates a 20px gap between the content area of our box and the border of our box.<\/p>\n\n\n\n<p>There is now a gap between our box and the edge of the page.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Border Area<\/h2>\n\n\n\n<p>The border area is where the border for a box will appear.&nbsp;Borders are colored outlines outside any padding. You can use any color to style a border. There are a number of built-in designs for borders, too.<\/p>\n\n\n\n<p>Suppose we want to add a 5px-wide light blue border around our box. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n\n&lt;p&gt;This is a box.&lt;\/p&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n\np {\n\theight: 200px;\n\twidth: 200px;\n\tpadding: 20px;\n\tborder: 5px solid lightblue;\n}\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We use the <a href=\"https:\/\/careerkarma.com\/blog\/css-borders\/\">CSS \u201cborder\u201d property<\/a> to define a 5px-wide light blue border. This border uses the \u201csolid\u201d style, which creates a single-line border. Notice that our border is separated from the content of our box. This is because we have specified a 20px padding around our box.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Margin Area<\/h2>\n\n\n\n<p>The margin area is the outermost layer of the box model. This area creates an empty gap that separates an element from other elements on the web page.<\/p>\n\n\n\n<p>Suppose we want to create a 10px space between two boxes on a web page. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n\n&lt;p&gt;This is a box.&lt;\/p&gt;\n&lt;p&gt;This is another box.&lt;\/p&gt;\n\n&lt;\/html&gt;\n&lt;style&gt;\n\np {\n\theight: 200px;\n\twidth: 200px;\n\tpadding: 20px;\n\tborder: 5px solid lightblue;\n\tmargin: 10px;\n}\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>This time, we have specified two boxes in our HTML file. Then, we have applied a 10px margin to our box using the \u201cmargin\u201d property.\n\n<\/p>\n\n\n\n<p>As you can see, there is now a 10px gap between our boxes. This is because we applied a margin to our boxes. This creates a gap between the border of our boxes and the other elements on a web page.\n\n<\/p>\n\n\n\n<p>To learn more about the margin area, read our tutorial on <a href=\"https:\/\/careerkarma.com\/blog\/css-margin\">CSS margin<\/a>.\n\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Width and Height Calculations<\/h2>\n\n\n\n<p>One mistake beginners tend to make is to assume that the height of an element and its width accounts for padding, margins, and borders. This is not accurate.\n\n<\/p>\n\n\n\n<p>The height and width properties allow you to set the height and width of the <strong>content area<\/strong> of a web element. This does not account for other elements on the web page.\n\n<\/p>\n\n\n\n<p>If we wanted to know how much space our complete box example from earlier takes up, we\u2019ll need to run a quick calculation. Here are the values we specified in our \u201cmargin area\u201d example from the previous section:\n\n<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Height: 200px<\/li><li>Width: 200px<\/li><li>Padding: 20px<\/li><li>Margin: 10px<\/li><li>Border: 5px<\/li><\/ul>\n\n\n\n<p>To calculate the width, we can use the following formula:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>200px (width) +<\/li><li>40px (left and right padding) +<\/li><li>10px (left and right border) +<\/li><li>20px (left and right margin)&nbsp;<\/li><\/ul>\n\n\n\n<p>This leaves us with a total of <strong>270px<\/strong>.&nbsp;<\/p>\n\n\n\n<p>To calculate the height, we would use the height of the box. We would also use the top and bottom values for padding, border, and margin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS box model is the structure used to render an element on a web page. Every element in HTML is a rectangular box. The box model defines how the content, padding, border, and margins appear for a box.<\/p>\n\n\n\n<p>Do you want to learn more about designing web pages with CSS? Check out our <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS guide<\/a>. This guide contains a list of top learning resources you can use to build your knowledge of CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"The browser uses the CSS box model to determine how an element should appear on a web page. The box model represents the size of an element and its border, padding, and margins. You can style each of these elements individually. Every element is surrounded by a box. Being able to understand how these boxes&hellip;","protected":false},"author":240,"featured_media":17405,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-17404","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The CSS box model is used to determine how a box should appear<\/title>\n<meta name=\"description\" content=\"The CSS box model is the structure generated for a web box, and consists of content, padding, border, and margin. On Career Karma, learn about the CSS box model.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-box-model\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Box Model: A How-To Guide\" \/>\n<meta property=\"og:description\" content=\"The CSS box model is the structure generated for a web box, and consists of content, padding, border, and margin. On Career Karma, learn about the CSS box model.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-box-model\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-10T08:53:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:07:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Box Model: A How-To Guide\",\"datePublished\":\"2021-01-10T08:53:35+00:00\",\"dateModified\":\"2023-12-01T12:07:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/\"},\"wordCount\":1169,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/\",\"name\":\"The CSS box model is used to determine how a box should appear\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg\",\"datePublished\":\"2021-01-10T08:53:35+00:00\",\"dateModified\":\"2023-12-01T12:07:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS box model is the structure generated for a web box, and consists of content, padding, border, and margin. On Career Karma, learn about the CSS box model.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-box-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Box Model: A How-To Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The CSS box model is used to determine how a box should appear","description":"The CSS box model is the structure generated for a web box, and consists of content, padding, border, and margin. On Career Karma, learn about the CSS box model.","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:\/\/careerkarma.com\/blog\/css-box-model\/","og_locale":"en_US","og_type":"article","og_title":"CSS Box Model: A How-To Guide","og_description":"The CSS box model is the structure generated for a web box, and consists of content, padding, border, and margin. On Career Karma, learn about the CSS box model.","og_url":"https:\/\/careerkarma.com\/blog\/css-box-model\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-10T08:53:35+00:00","article_modified_time":"2023-12-01T12:07:55+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Box Model: A How-To Guide","datePublished":"2021-01-10T08:53:35+00:00","dateModified":"2023-12-01T12:07:55+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/"},"wordCount":1169,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-box-model\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/","url":"https:\/\/careerkarma.com\/blog\/css-box-model\/","name":"The CSS box model is used to determine how a box should appear","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg","datePublished":"2021-01-10T08:53:35+00:00","dateModified":"2023-12-01T12:07:55+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS box model is the structure generated for a web box, and consists of content, padding, border, and margin. On Career Karma, learn about the CSS box model.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-box-model\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/woman-wearings-coop-neck-floral-top-using-her-apple-brand-144230.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-box-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Box Model: A How-To Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=17404"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/17405"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=17404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=17404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=17404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}