{"id":743,"date":"2008-06-23T19:07:56","date_gmt":"2008-06-23T19:07:56","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=743"},"modified":"2023-05-12T13:24:13","modified_gmt":"2023-05-12T19:24:13","slug":"the-css-box-model","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=the-css-box-model","title":{"rendered":"The CSS Box Model"},"content":{"rendered":"

In order to understand positioning with CSS, you must first understand the box model, but before explaining the box model, here are a few helpful definitions that I will be referring to throughout this post:<\/span><\/p>\n

 —
<\/span><\/p>\n

The Viewport<\/span><\/b><\/p>\n

The viewport is the area on a browser that displays the webpage.  <\/span>Imagine that your browser is a window, with the outer edges being frames and the area that displays the webpage (the viewport) as the glass.  <\/span>The viewport is separate from the page itself, so even if the page is scrolled, the viewport is always the area that you can see.
<\/span><\/p>\n

The Initial Containing Block<\/span><\/b><\/p>\n

The entire space assigned to your document.  <\/span>The initial containing block is set by the web designer as the size of the web page.  <\/span>This includes parts of the page that users have to scroll to see.
<\/span><\/p>\n

Containing Blocks<\/span><\/b><\/p>\n

A containing block has another element inside of it.  <\/span>In the example below, the div named \u201ccontainer\u201d is the containing block for the div named \u201celement\u201d.
<\/span><\/span><\/p>\n

\n

\n
Code:<\/div>\n
\r\n\r\n <div class=\u201dcontainer\u201d>\r\n                <div class=\u201delement\u201d>\r\n                <\/div>\r\n<\/div>\r\n <\/pre>\n<\/div>\n
Normal Flow<\/span><\/b><\/p>\n
The normal flow of the document is the order in which the elements are displayed.  <\/span>It is the way a document would appear with no positioning or floated elements.  <\/span>The content will start at the top of the page and flow downward. 
<\/span><\/p>\n
Block-level elements<\/span><\/b><\/p>\n
Elements that are formatted visually as blocks.  <\/span>Block elements automatically create a line break, unless given the rule, \u201cdisplay:inline;\u201d, which will cause them to be treated as an inline element.  <\/span>Examples of block-level elements are: 
<\/span><\/p>\n
<\/p>\n
\n
Code:<\/div>\n
\r\n\r\n<div>, <h1>, <p>\r\n <\/pre>\n<\/div>\n
<\/span><\/p>\n
Inline-level elements<\/span><\/b><\/p>\n
Inline elements do not form blocks of content and are displayed visually in a line.  <\/span>They do not create line breaks.  <\/span>Examples of inline level elements are:<\/span><\/p>\n
<\/p>\n
\n
Code:<\/div>\n
\r\n\r\n<b>, <em>, <span>\r\n<\/pre>\n<\/div>\n
<\/span><\/p>\n
    <\/div>\n
 The Box Model<\/span><\/b><\/p>\n
Take a look at the image below.  <\/span>I have taken it directly from the W3 site, in order to illustrate the box model, and why it\u2019s important to positioning with style sheets.<\/span><\/p>\n
 <\/span><\/b>
<\/span><\/p>\n
For display purposes, every block-level element in a document is considered to be a rectangular box.  <\/span>As you can see from the diagram above, each box is comprised of 4 parts:<\/span><\/p>\n
    \n
  • Content \u2013 This could      include text or an image.<\/span><\/li>\n
  • Padding \u2013 Invisible      area that defines the distance from the border of the box to the content.<\/span><\/li>\n
  • Border \u2013 The area      surrounding the content and padding.<\/span><\/li>\n
  • Margin \u2013 Invisible      area that defines the space between the outside border of the box and      other elements on the page.<\/span><\/li>\n<\/ul>\n
    It is equally important to understand how the width of the box is calculated, and why defining only \u201cwidth\u201d isn\u2019t enough.  <\/span>Here is the equation to determine the width of a box:<\/span><\/p>\n
    width<\/span><\/b> = margin-left + border(left) + padding-left + content width + padding-right + border(right) + margin-right 
    <\/span><\/p>\n
    For example, look at the code below and try to determine how wide the box will be:<\/span><\/p>\n
     <\/p>\n
    \n
    Code:<\/div>\n
    \r\n\r\n.divtest           {\r\n                                position: relative;\r\n                                width: 100px;\r\n                                height: 75px;\r\n                                padding: 10px;\r\n                                margin: 5px;\r\n                                border: solid 1px black;\r\n                         }\r\n <\/pre>\n<\/div>\n
    <\/span><\/p>\n
    According to the box model equation, this box would be ‘132px’ wide, as illustrated by the image below. 
    <\/span><\/p>\n
    Width = margin-left(5) + border-left(1) + padding-left(10) + content width(100) + padding-right(10) + border-right(1)+maring-right(5) = 132<\/span><\/p>\n
     
    <\/span>
    Height<\/span><\/b><\/p>\n
    Height is calculated differently than width.  <\/span>In the normal flow of a document, vertical margins are collapsed.  <\/span>That means when a box is placed on top of another, the distance between the two is equal to the largest margin, as illustrated by the image below:<\/span><\/p>\n
      
    <\/span><\/p>\n
    If these two boxes had been placed next to each other, the margins would be added together to create a total of 15px.  <\/span>However, since they are placed on top of each other, the margins are collapsed and only the largest margin is used.<\/p>\n
    It is very important that you understand the box model before moving into positioning.  <\/span>Whenever you place a block-level element on a page, you must be aware of the 4 attributes explained above which determine placement and size.  <\/span>For information on positioning with CSS, please read the next post in the forum entitled, “Positioning with CSS”.<\/b><\/b><\/p>\n","protected":false},"excerpt":{"rendered":"
    In order to understand positioning with CSS, you must first understand the box model, but before explaining the box model, here are a few helpful definitions that I will be referring to throughout this post:  — The Viewport The viewport is the area on a browser that displays the webpage. …<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-743","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=743"}],"version-history":[{"count":3,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/743\/revisions"}],"predecessor-version":[{"id":833,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/743\/revisions\/833"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=743"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=743"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}