Blocks Worksheet

Blocks Worksheet: Box Sizing and Inheritance

Important: Make sure you examine the W3Schools Box Model Overview before doing this Worksheet.

Some (unofficial) Terminology:

Content Width - The content-box width of the block -- the default for the CSS width property.
Full Width - The complete width the block takes up in the page, including any left/right margins.
    The full width can be larger than the width set by the CSS width property.
Visible Width - The extent of the block that is visible to the human eye. (May be less than full width.)
    If you can see it (background color, border) it contributes to the visible width.
    A block could have no visible width if no parts of it have color contrast with it's surroundings.

Box Sizing


          /* when box-sizing is not set, the default is content-box */

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

          border: 2px solid #000;

          width: 500px;

          padding: 5px;


          box-sizing: border-box;

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

          border: 2px solid #000;

          width: 500px;

          padding: 5px;


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

          border: 10px solid #FFF;

          width: 500px;

          padding: 5px 7px; /*TB & LR*/

Question 1:

Calculate the different widths for each block and enter them into the table below:

	Content Width	Full Width	Visible Width
Red Block
Green Block
Blue Block

Question 2:

Notice the style class names for the three blocks above. Are those good style class names to use in practice? Why or why not?

Child Expansion within Parent Block


            border: 1px solid #000;

            padding:5px;

            width:300px;


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

              border: 1px solid #000;

              padding: 5px;

Question 3:

Calculate the content width of the child block and list it below. Briefly explain your calculation.

Question 4:

Suppose you apply box-sizing:border-box; to both the parent and child blocks above. Calculate the content width of the child block and list it below.

Question 5:

The grey blocks in this section use CSS ID selectors but the 3 colored blocks in the first section use class selectors. There was no compelling reason to choose one type over the other for this worksheet, other than to contrast the difference. In general, you can always use a class selector instead of an ID selector, but not vise-versa (the other way around). Briefly explain why.

Child Inheritance from Parent Task to Complete:

Make your own example. Create a parent div with the following style properties set:
background-color, color, border, cursor, text-align, font-family, font-style, font-weight, margin, padding, width
Set each value to something other than the default so that you can easily see the effect of your CSS in your blocks. For example, set text-align to something other than left so that you can see it's doing something, set large margins and padding (like 30px or more) so that they are obvious, use a strange font, etc. Put the following sentence in the parent block: This task is to determine what properties from a parent block (like me) are inherited by a child block.

Put a child div inside the parent below that sentence. The ONLY style property the child block should have set is border so that you can see its outline.

Inside the child block, answer the following questions:
Which style properties did the child inherit from from the parent and which ones it did not? Can you categorize the general types of properties that are inherited and what general types are not? Note that border is one property that will not inherit, which is why the child needs it's own border set so its outline is apparent.