{"id":90,"date":"2025-03-21T17:36:52","date_gmt":"2025-03-21T17:36:52","guid":{"rendered":"https:\/\/kingstatue.com\/?p=90"},"modified":"2025-03-21T17:36:52","modified_gmt":"2025-03-21T17:36:52","slug":"css-box-model-size-spacing-border","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=90","title":{"rendered":"CSS Box Model (Size, Spacing, Border)"},"content":{"rendered":"\n

CSS Box Model<\/strong><\/p>\n\n\n\n

width: 200px;  
height: 100px;  
padding: 10px;  
margin: 20px;  
border: 2px solid black;
<\/code><\/pre>\n\n\n\n
\n\n\n\n
1. width: 200px;<\/code><\/strong><\/h3>\n\n\n\n
    \n
  • Sets the content width<\/strong> of the element to 200 pixels<\/strong>.<\/li>\n\n\n\n
  • It does not include<\/strong> padding, margin, or border.<\/li>\n<\/ul>\n\n\n\n
    2. height: 100px;<\/code><\/strong><\/h3>\n\n\n\n
      \n
    • Sets the content height<\/strong> to 100 pixels<\/strong>.<\/li>\n\n\n\n
    • Like width<\/code>, it does not include padding, margin, or border.<\/li>\n<\/ul>\n\n\n\n
      3. padding: 10px;<\/code><\/strong><\/h3>\n\n\n\n
        \n
      • Adds space inside<\/strong> the element, between the content and the border.<\/li>\n\n\n\n
      • It increases the total size<\/strong> of the element.<\/li>\n\n\n\n
      • Example: If width: 200px<\/code> and padding: 10px<\/code>, the actual width becomes 220px<\/strong> (200px + 10px left + 10px right<\/code>).<\/li>\n<\/ul>\n\n\n\n
        4. margin: 20px;<\/code><\/strong><\/h3>\n\n\n\n
          \n
        • Adds space outside<\/strong> the element, creating separation from other elements.<\/li>\n\n\n\n
        • It does not affect the element’s actual size<\/strong>, only its position.<\/li>\n<\/ul>\n\n\n\n
          5. border: 2px solid black;<\/code><\/strong><\/h3>\n\n\n\n
            \n
          • Adds a 2-pixel thick<\/strong> solid black<\/strong> border around the element.<\/li>\n\n\n\n
          • The border adds to the element\u2019s total size.<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            Total Element Size (Box Model Calculation)<\/strong><\/h3>\n\n\n\n
            By default, the content-box model<\/strong> is used, meaning the total size is calculated as:<\/p>\n\n\n\n
            Total Width<\/strong> = width + left padding + right padding + left border + right border<\/code>
            Total Height<\/strong> = height + top padding + bottom padding + top border + bottom border<\/code><\/p>\n\n\n\n
            For the given example:<\/p>\n\n\n\n
              \n
            • Width<\/strong> = 200px + 10px + 10px + 2px + 2px = 224px<\/code><\/li>\n\n\n\n
            • Height<\/strong> = 100px + 10px + 10px + 2px + 2px = 124px<\/code><\/li>\n<\/ul>\n\n\n\n
              If box-sizing: border-box;<\/code> is applied, then width<\/code> and height<\/code> include padding and border, keeping the total size fixed.<\/p>\n\n\n\n
              Example<\/p>\n\n\n\n
              .box {<\/p>\n\n\n\n
                  width: 200px;<\/p>\n\n\n\n
                  height: 100px;<\/p>\n\n\n\n
                  padding: 10px;<\/p>\n\n\n\n
                  margin: 20px;<\/p>\n\n\n\n
                  border: 2px solid black;<\/p>\n\n\n\n
              \u00a0\u00a0\u00a0 background-color: black;<\/p>\n\n\n\n
              }<\/p>\n\n\n\n
              \ud83d\udccc This will create a box with:<\/p>\n\n\n\n
              black background
              200px width and 100px height (content area)
              10px padding inside
              20px margin outside
              2px solid black border<\/p>\n","protected":false},"excerpt":{"rendered":"
              CSS Box Model width: 200px; height: 100px; padding: 10px; margin: 20px; border: 2px solid black; 1. width: 200px; 2. height: 100px; 3. padding: 10px; 4. margin: 20px; 5. border: 2px…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}