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 solid #000;

            padding:5px;

            width:300px;


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

              border: 1px solid #000;

              padding:5px;

Question:

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

Put your answer here.

Question:

What limits the "horizontal expansion" of the child block?

Question:

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

Adjacent Blocks Example


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

            border: 1px solid #000;

            width:300px;

            padding:5px;


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

          border: 1px solid #000;

          width:350px;

          padding:5px;

Question:

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

Stacked Blocks Example


            box-sizing: border-box;

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

            border: 1px solid #000;

            width:300px;

            padding:5px;


          box-sizing: border-box;

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

          border: 1px solid #000;

          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.

Inline Blocks Example Button Link 1 Button Link 2

Question:

Why is there a blank space between the two button links above? I am looking for a very specific answer that speaks about the specific behavior of inline blocks.

Very Curious Example

What the hex going on?

Why all the vertical space?

Question:

Exactly hom much vertical gray space is there between the white paragraphs? Why?

Question:

Does this violate the principle of vertical collapsing margins? 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 30px or more) so that they are obvious. List all the style properties inside the parent like I have done above in several of the examples.

Put a child div inside the parent. The only style property the child block should have set is border so that you can see its outline. I|put a short description inside the child block to 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.