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

No they are not because what if you decide to change the color that class name no longer identifies with the appropriate style of the block.


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 is 268px. To calculate this, I added up the the borders, margins, and padding and then subtracted that from the width of the parent block.


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 of the child block is 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.

ID selectors are intended to be unique and can only be used once in a page. Class selectors can be used more than once. If you wanted to use the grey block again in the page you wouldn't be able to. But, you could reuse the red, blue, or green ones anywhere.


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 style properties that the child class will inherit are the background-color, cursor, font-family, font-style, font-weight, and text-align. It did not inherit the margin, padding, or border styles. Yes, you can categorize that the child class inherited non specified styles and it didn't inherit specified styles. All the visual (non specified) styles were generic and didn't require a set value like margin and padding. The border is what sets the child block apart from the parent class so it won't inherit that since borders line the outside of a block and normally doesn't go within the block.