Blocks Worksheet

Blocks Worksheet: Box Sizing and Inheritance

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	500	544 = 500+10+4+30	514 = 500+10+4
Green Block	486 = 500-4-10	530 = 500+30	500
Blue Block	500	554= 500+14+20+20	514 = 500+14

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?

They are not wrong, but less than ideal. For example, if you were to change a background color, then the style class names would no longer be accurate unless you change them too. It's best to use names indicating the purpose of the style classes (e.g. box_model_exercise1, box_model_exercise2, ...) rather than names dependent upon the values of particular styles inside the class.

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.

268

Parent content width: 300
Child content width: 268 = 300-20-2-10

The child will expand as much as it can inside the content area of the parent. The child content width is the parent's content width - child margin - child border - child padding.

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.

256

The only difference is the parent content width is only 288 = 300-2-10 since the parent width:300px includes both the parent border and padding because of box-sizing:border-box;. Thus the child content width is 12 less than in question 3. Note that box-sizing:border-box; ONLY directly affects the parent block since the child has no width set in the css.

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 can only be applied once in the HTML since you shouldn't use the same ID value twice. You can create a class selector and only apply it once in the HTML. But class selectors are more versatile since you can call the same class as many times as you want in the HTML.

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.

If you build the parent and child as described above, you will see that the following are inherited by the child: background-color, color, cursor, text-align, font-family, font-style, font-weight.

But the following are not inherited: border, margin, padding, width (Note: the child will not inherit the actual padding and width of the parent, but the child's width is indirectly determined by the parent's content width.

This makes sense if you stop and think about it. Aesthetic properties should inherit. For example, if you set the color and font properties for a whole a wrapper block, then columns in the wrapper should also inherit those aesthetic properties, for example. However, if you set structural properties like border and padding of a wrapper, then it would totally mess up child column blocks if they were to inherit the same structural properties.