This exercise demonstrates basic box model properties as well as how the CSS3 box-sizing property impacts box model height and width.

  1. Go to codepen.io and log into your account.

  2. Next, go to the button icon at the far right top corner and select the "New pen" option.

  3. In the HTML pane, add a div.

  4. Add a class attribute to the div with value "box".

  5. Within the div, type "lorem" and then hit the tab key to produce some placeholder text.

  6. In the CSS pane, create a "block" class selector with the following:

  • Set the width to 400px
  • Set the height to 10px
  • Set a background color to your choosing
  • Set padding on all sides to 20 pixels
  • Set border on all sides to 2 pixels wide, a solid line, and color of your choosing e.g. border: 2px solid #ccc;
  • Set margin on all sides to 20 pixels

    Note that the height contrains the box to the point where text overflows.

  1. Change the height property to min-height. The text will push the height of the box as determined by the amount of content.

The overall width of the div content is 440 pixels and not 400 pixels because of the 20 pixels of padding on either side. The Box-sizing property changes this.

  1. Add the box-sizing property to the .block class and set its value to "border-box". The overall width of the div content is now 400 pixels as box-sizing forces the width to include any padding. This applies to height as well.

  2. Send me your CodePen URL for this exercise via Insight.


793 0 1