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 - What appears to the eye to be the width ofis often less than the full width.
    For a block with borders, from outside of left border to outside of right border. If the borders are visible (color contrast), the visible width is the border-box width.
    For a block without borders, if a background (color or image) is visible (color contrast), that's the visible width (backgrounds cover content-box + padding).
    A block without color contrast with it's surroundings would have no apparent visible width.

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	500px	544px	514px
Green Block	486px	530px	500px
Blue Block	500px	554px	514px

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?

These are not good style names, because if the color of the box changes, the name would no longer make sense. As a result, these names are restrictive.

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.

The content-width of the child block is 268px. Since the parent block has a content width of 300px, the full width of the child block is 300px. The child block also has a total width margin of 20px, padding of 10px, and a border of 2px. 300 - 20 - 10 - 2 = 268px.

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.

The content width is 256px (Parent: 300px - 2px - 10px = 288px content width. Child: 288px - 20px - 2px - 10px = 256px).

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 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.

While a class selector can be used multiple times, an ID selector can only be used once. As a result, an ID selector is much less flexible than a class selector, since it refers to a single, unique element on the page.

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.

This task is to determine what properties from a parent block (like me) are inherited by a child block.

The child block inherited all properties except margin, padding, and border. Generally, the child block inherits all style properties and avoids spacing properties (margin, padding, border).