Title of the document

Make sure you examine the W3Schools Box Model Overview before doing this assignment.

My Terminology:

Content Width - Refers to the width of the content part of the block.
Effective Width - Refers to the "outer" or "complete" width of the block from left to right, including both margins.
Visible Width - Refers to what appears to the eye to be the width of the block.
    For a block with borders, this is from the outside of left border to the outside of the right border.
    For a block without borders, this is the width of the shaded background.
    A block without border or shading would have no apparent visible width.

Child Expansion Example


            border: 1px #000 solid;

            padding:5px;

            width:300px;


              margin: 5px 10px 5px 10px; /*TRBL*/

              border: 1px #000 solid;

              padding:5px;

Question:

What is the visible width of the parent block? Explain.

Put your answer here.

Question:

What determines how much the child block can expand horizontally? How about vertically?

Question:

What is the content width of the child block? Explain.

Adjacent Blocks Example


            margin: 5px 10px 5px 10px;  /*TRBL*/

            border: 1px #000 solid;

            width:300px;

            padding:5px;


          margin: 5px 10px 5px 15px;  /*TRBL*/

          border: 1px #000 solid;

          width:350px;

          padding:5px;

Question:

How much space is between the visible edges of the adjacent blocks? Explain.

Stacked Blocks Example


            margin: 5px 10px 25px 10px;  /*TRBL*/

            border: 1px #000 solid;

            width:300px;

            padding:5px;


          margin: 5px 10px 20px 10px;  /*TRBL*/

          border: 1px #000 solid;

          width:300px;

          padding:5px;

Question:

How much space is between the visible edges of the stacked blocks? Explain.

Question:

What is the effective width of the bottom block? Explain.

Child Inheritance Example Exercise:

Make your own example. Create a parent div with the following style properties set: background-color, border, color, cursor, text-align, font-family, font-style, font-weight, margin, padding, width. Set the properties to something other than the defaults. For example, set text-align to something other than left and so forth. Set large margins and padding (like 50px or more). List all the style properties inside the parent like I have done above.

Put a child div inside the parent. The only style property the child block should have set is border (different from the parent) so that you can see its outline. Add a few sentences inside the child block that describe which style properties it inherited from the parent and which ones it did not. Note that border is one property that will not inherit, so that’s why the child needs a distinct border so its outline will be apparent.