{"id":26812,"date":"2024-11-14T15:23:31","date_gmt":"2024-11-14T14:23:31","guid":{"rendered":"https:\/\/www.digitizer.rs\/news-stories\/an-introduction-to-the-basic-css-box-model\/"},"modified":"2024-11-14T15:43:52","modified_gmt":"2024-11-14T14:43:52","slug":"an-introduction-to-the-basic-css-box-model","status":"publish","type":"post","link":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/","title":{"rendered":"An introduction to the basic CSS box model"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1616420482830{padding-top: 20px !important;padding-bottom: 30px !important;}&#8221;][vc_column][vc_column_text css=&#8221;.vc_custom_1646920094182{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">When laying out a document, the browser&#8217;s rendering engine renders each element as a rectangular frame according to the standard CSS basic frame model. CSS determines size, position, and properties (color, background, height, etc.). <\/span><\/p>\n<p><span style=\"color: #333333;\">Each field consists of four parts (or areas), defined by their respective boundaries:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">Content<\/span><\/li>\n<li><span style=\"color: #333333;\"><em>Padding<\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>Border<\/em><\/span><\/li>\n<li><span style=\"color: #333333;\"><em>Margin<\/em><\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h1><span><strong><span style=\"color: #ff6600;\">What is CSS box model<\/span><\/strong><\/span><\/h1>\n<p><span style=\"color: #333333;\">A box model is a content area, bounded by a content border, that contains the &#8220;real&#8221; content of an element, such as text, an image, or a video player. Its dimensions are content-width (or content-frame width) and content-height (or content-frame-height). It often has a background color or background image  <\/span><\/p>\n<p><span style=\"color: #333333;\">If <em>the box-sizing<\/em> property is set to <em>content<\/em> -block (default) and if the element is a block element ( <em>div<\/em> , <em>paragrapf<\/em> ), the size of the content area can be explicitly defined by width ( <em>width<\/em> ), min-width ( <em>min-width<\/em> ), max-width ( <em>max-width<\/em> ), height ( <em>height<\/em> ), minimum-height ( <em>min-height<\/em> ), and the maximum height property ( <em>max-height<\/em> ).<\/span><\/p>\n<p><span style=\"color: #333333;\">The <em>padding<\/em> area, bounded by the <em>padding<\/em> border, extends the content area to include the edges of the element. Its dimensions are the width of the <em>padding<\/em> box and the height of the <em>padding<\/em> box. <\/span><\/p>\n<p><span style=\"color: #333333;\">The width of <em>the padding<\/em> is determined by CSS properties such as <em>padding-top<\/em> , <em>padding-bottom<\/em> , <em>padding-left<\/em> , <em>padding-right<\/em> . We can also set <em>the padding<\/em> property itself and give all four <em>padding<\/em> properties or set only one that will be reflected on all four <em>padding<\/em> sizes. <\/span><\/p>\n<p><span style=\"color: #333333;\">The <em>border<\/em> area, limited by the border, extends to the supported area so that it also includes the edges of the element. Its dimensions are frame width and frame height. <\/span><\/p>\n<p><span style=\"color: #333333;\">The thickness of the <em>border<\/em> is determined by <em>the border-width<\/em> properties or uniquely <em>border<\/em> . If the box-size property is set to <em>border-box<\/em> , the size of the border area can be explicitly defined by the <em>width<\/em> , <em>min-width<\/em> , <em>max-width, height, min-height<\/em> and <em>max-height<\/em> properties. When a background (background color or background image) is set on a field, it extends to the outer edge of the border (ie, extends below the border in z-order). This default behavior can be changed with the CSS <em>background-clip<\/em> property.   <\/span><\/p>\n<p><span style=\"color: #333333;\">The margin area, bounded by the margin edge, extends the border area to include the empty area used to separate the element from its neighbors. Its dimensions are the width of <em>the margin-box<\/em> and the height <em>of the margin-box<\/em> . <\/span><\/p>\n<p><span style=\"color: #333333;\">The size of the margin area is determined by <em>the margin-top, margin-right, margin-bottom, margin-left<\/em> or just <em>margin<\/em> properties. When margin collapse occurs, the margin area is not clearly defined, as the margins are split between frames. <\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><strong><span style=\"color: #ff6600;\">CSS box model layout<\/span><\/strong><\/h2>\n<p><span style=\"color: #333333;\">We gave the element, which is <em>a div<\/em> in this case, the class test and it contains the following properties:<\/span><\/p>\n<p><span style=\"color: orange;\">.test<\/span> { <span style=\"color: blue;\">width<\/span> : <span style=\"color: green;\">300px<\/span> ; <span style=\"color: blue;\">height<\/span> : <span style=\"color: green;\">300px<\/span> ; <span style=\"color: blue;\">padding<\/span> : <span style=\"color: green;\">300px<\/span> ; <span style=\"color: blue;\">margin<\/span> : <span style=\"color: green;\">20px<\/span> ; <span style=\"color: blue;\">border<\/span> : <span style=\"color: green;\">3px<\/span> <span style=\"color: red;\">solid red<\/span> ;<br \/>\n }[\/vc_column_text][vc_single_image image=&#8221;23918&#8243; css_animation=&#8221;fadeIn&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1618911925767{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; img_hover=&#8221;fade-out&#8221;][vc_column_text css=&#8221;.vc_custom_1618911990467{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]<span style=\"color: #333333;\">As we can see in the picture above, we have given an example <em>of a box<\/em> model where the blue part represents the content of the element, the green part represents <em>the padding,<\/em> the red part that relies on <em>the padding<\/em> represents <em>the border<\/em> of the element and the orange one represents the margin or distance from the neighboring elements.<\/span><\/p>\n<p><span style=\"color: #333333;\">You can see <em>the box<\/em> model as a house with a yard, where the distance from the fence to the house would represent <em>padding<\/em> , the fence would represent <em>the border<\/em> , the distance between your fence and the neighbor&#8217;s would represent the margin.<\/span><\/p>\n<p><span style=\"color: #333333;\">This is the basis of any CSS <em>box<\/em> model and its knowledge.<\/span><\/p>\n<p><span style=\"color: #333333;\">Finally, note that for non-replaced inline elements, the amount of space occupied (contribution to line height) is determined by the <em>line-height<\/em> property, although borders and padding are still displayed around the content.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><span style=\"font-weight: 400;\">For more news and interesting stories from digital marketing,<\/span> <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/www.digitizer.rs\/en\/news-stories\/\"><span style=\"font-weight: 400;\">visit our blog page<\/span><\/a><\/span> <span style=\"font-weight: 400;\">or<\/span> <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/www.instagram.com\/webdigitizer\/\"><span style=\"font-weight: 400;\">follow our Instagram profile.<\/span><\/a><\/span><\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221;][vc_column][vc_single_image source=&#8221;external_link&#8221; custom_src=&#8221;https:\/\/www.digitizer.rs\/blog\/digitizer-line.jpg&#8221;][vc_column_text]<em><span style=\"color: #333333;\">Made by Milo\u0161 Stojanovi\u0107 &#8211; Senior Web Developer @Digitizer<\/span><\/em>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1587387018476{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 30px !important;padding-left: 30px !important;}&#8221;][vc_column][vc_column_text][vc_btn title=&#8221;Back to News &amp; Stories&#8221; style=&#8221;gradient-custom&#8221; gradient_custom_color_1=&#8221;#000000&#8243; gradient_custom_color_2=&#8221;#515151&#8243; align=&#8221;center&#8221; link=&#8221;url:https%3A%2F%2Fwww.digitizer.rs%2Fnews-stories%2F|title:Back%20to%20NEWS%20%26amp%3B%20STORIES|&#8221;][\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1616420482830{padding-top: 20px !important;padding-bottom: 30px !important;}&#8221;][vc_column][vc_column_text css=&#8221;.vc_custom_1646920094182{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221; font_family=&#8221;Open Sans&#8221;]When laying out a document, the browser&#8217;s rendering engine renders each element as a rectangular frame according to the standard CSS basic frame model. CSS determines size, position, and properties (color, background, height, etc.). Each field consists of four parts (or areas),&hellip;<\/p>\n","protected":false},"author":10,"featured_media":23917,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4384],"tags":[4378,4388,4398,4403,4407,4380,4412,4376,4411],"post_series":[],"class_list":["post-26812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-content-en","tag-digital-en","tag-google-en","tag-internet-en","tag-online-en","tag-search-en-2","tag-web-design-en","tag-website-optimization-en-2","tag-wordpress-en","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introduction to CSS basic box model - Digitizer<\/title>\n<meta name=\"description\" content=\"A box model is a content area, bounded by a content border, that contains the &quot;real&quot; content of an element, such as text, an image, or a video player.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to CSS basic box-model - Digitizer\" \/>\n<meta property=\"og:description\" content=\"A box model is a content area, bounded by a content border, that contains the &quot;real&quot; content of an element, such as text, an image, or a video player.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/\" \/>\n<meta property=\"og:site_name\" content=\"Digitizer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdigitizer\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-14T14:23:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-14T14:43:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-uvod-css-box-model.jpg\" \/>\n<meta name=\"author\" content=\"nebojsa.radovanovic@digitizer.rs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Introduction to CSS basic box-model - Digitizer\" \/>\n<meta name=\"twitter:description\" content=\"A box model is a content area, bounded by a content border, that contains the &quot;real&quot; content of an element, such as text, an image, or a video player.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nebojsa.radovanovic@digitizer.rs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/\"},\"author\":{\"name\":\"nebojsa.radovanovic@digitizer.rs\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/person\\\/25e8bb23e8c57d47a985e7a45c11a753\"},\"headline\":\"An introduction to the basic CSS box model\",\"datePublished\":\"2024-11-14T14:23:31+00:00\",\"dateModified\":\"2024-11-14T14:43:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/\"},\"wordCount\":821,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-uvod-css-box-model.jpg\",\"keywords\":[\"content\",\"digital\",\"google\",\"internet\",\"online\",\"search\",\"web design\",\"website optimization\",\"wordpress\"],\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/\",\"name\":\"Introduction to CSS basic box model - Digitizer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-uvod-css-box-model.jpg\",\"datePublished\":\"2024-11-14T14:23:31+00:00\",\"dateModified\":\"2024-11-14T14:43:52+00:00\",\"description\":\"A box model is a content area, bounded by a content border, that contains the \\\"real\\\" content of an element, such as text, an image, or a video player.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-uvod-css-box-model.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/digitizer-blog-uvod-css-box-model.jpg\",\"width\":1024,\"height\":535},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/an-introduction-to-the-basic-css-box-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"News &#038; Stories\",\"item\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/news-stories\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"An introduction to the basic CSS box model\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/\",\"name\":\"Digitizer\",\"description\":\"Google Ads - Social - Email Marketing - Web Design - Video Editing\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#organization\",\"name\":\"Digitizer\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitizer.rs\\\/pictures\\\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg\",\"width\":1000,\"height\":466,\"caption\":\"Digitizer\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/webdigitizer\",\"https:\\\/\\\/www.instagram.com\\\/webdigitizer\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@webdigitizer\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/digitizer\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.digitizer.rs\\\/en\\\/#\\\/schema\\\/person\\\/25e8bb23e8c57d47a985e7a45c11a753\",\"name\":\"nebojsa.radovanovic@digitizer.rs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g\",\"caption\":\"nebojsa.radovanovic@digitizer.rs\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to CSS basic box model - Digitizer","description":"A box model is a content area, bounded by a content border, that contains the \"real\" content of an element, such as text, an image, or a video player.","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:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to CSS basic box-model - Digitizer","og_description":"A box model is a content area, bounded by a content border, that contains the \"real\" content of an element, such as text, an image, or a video player.","og_url":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/","og_site_name":"Digitizer","article_publisher":"https:\/\/www.facebook.com\/webdigitizer","article_published_time":"2024-11-14T14:23:31+00:00","article_modified_time":"2024-11-14T14:43:52+00:00","og_image":[{"url":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-uvod-css-box-model.jpg","type":"","width":"","height":""}],"author":"nebojsa.radovanovic@digitizer.rs","twitter_card":"summary_large_image","twitter_title":"Introduction to CSS basic box-model - Digitizer","twitter_description":"A box model is a content area, bounded by a content border, that contains the \"real\" content of an element, such as text, an image, or a video player.","twitter_misc":{"Written by":"nebojsa.radovanovic@digitizer.rs","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#article","isPartOf":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/"},"author":{"name":"nebojsa.radovanovic@digitizer.rs","@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/person\/25e8bb23e8c57d47a985e7a45c11a753"},"headline":"An introduction to the basic CSS box model","datePublished":"2024-11-14T14:23:31+00:00","dateModified":"2024-11-14T14:43:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/"},"wordCount":821,"publisher":{"@id":"https:\/\/www.digitizer.rs\/en\/#organization"},"image":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-uvod-css-box-model.jpg","keywords":["content","digital","google","internet","online","search","web design","website optimization","wordpress"],"articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/","url":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/","name":"Introduction to CSS basic box model - Digitizer","isPartOf":{"@id":"https:\/\/www.digitizer.rs\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#primaryimage"},"image":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-uvod-css-box-model.jpg","datePublished":"2024-11-14T14:23:31+00:00","dateModified":"2024-11-14T14:43:52+00:00","description":"A box model is a content area, bounded by a content border, that contains the \"real\" content of an element, such as text, an image, or a video player.","breadcrumb":{"@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#primaryimage","url":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-uvod-css-box-model.jpg","contentUrl":"https:\/\/www.digitizer.rs\/pictures\/digitizer-blog-uvod-css-box-model.jpg","width":1024,"height":535},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitizer.rs\/en\/news-stories\/an-introduction-to-the-basic-css-box-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitizer.rs\/en\/"},{"@type":"ListItem","position":2,"name":"News &#038; Stories","item":"https:\/\/www.digitizer.rs\/en\/news-stories\/"},{"@type":"ListItem","position":3,"name":"An introduction to the basic CSS box model"}]},{"@type":"WebSite","@id":"https:\/\/www.digitizer.rs\/en\/#website","url":"https:\/\/www.digitizer.rs\/en\/","name":"Digitizer","description":"Google Ads - Social - Email Marketing - Web Design - Video Editing","publisher":{"@id":"https:\/\/www.digitizer.rs\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitizer.rs\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitizer.rs\/en\/#organization","name":"Digitizer","url":"https:\/\/www.digitizer.rs\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitizer.rs\/pictures\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg","contentUrl":"https:\/\/www.digitizer.rs\/pictures\/Digitizer-digitalni-marketing-izrada-dizajn-sajtova-graficki-motion-dizajn.jpg","width":1000,"height":466,"caption":"Digitizer"},"image":{"@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdigitizer","https:\/\/www.instagram.com\/webdigitizer\/","https:\/\/www.tiktok.com\/@webdigitizer","https:\/\/www.linkedin.com\/company\/digitizer"]},{"@type":"Person","@id":"https:\/\/www.digitizer.rs\/en\/#\/schema\/person\/25e8bb23e8c57d47a985e7a45c11a753","name":"nebojsa.radovanovic@digitizer.rs","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9bb082dbfe42607d74375a50a8acbf4083ae2a807b6f3d36e610fc2ea2c639b?s=96&d=mm&r=g","caption":"nebojsa.radovanovic@digitizer.rs"}}]}},"_links":{"self":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/posts\/26812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/comments?post=26812"}],"version-history":[{"count":0,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/posts\/26812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/media\/23917"}],"wp:attachment":[{"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/media?parent=26812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/categories?post=26812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/tags?post=26812"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.digitizer.rs\/en\/wp-json\/wp\/v2\/post_series?post=26812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}