WDD 130: Web Fundamentals

W02 Learning Activity: CSS Box Model

Overview

The CSS Box Model is a box that wraps around every element. From the inside out, the model defines how the content, padding, border, and margin are rendered.

Prepare

Watch the following video:

▶️ The Box Model (5:19 minutes, 📄 Transcript)

Here is a CSS rule for div elements that defines the width and box model. The content is 400 pixels wide and the height is driven by the actual (but not shown) content, whatever it happens to be.

div {
  width: 400px;
  margin: 10px;
  border: 1px solid #000000;
  padding: 15px;
}
Box Model Labeled Dimensions without border-box

Now apply the box-sizing property of border-box to this same example.
Note the difference in the content dimensions (blue shaded area). With border-box, the 400px width includes the padding and border, so the content area shrinks to 368px wide:

div {
  box-sizing: border-box;
  width: 400px;
  margin: 10px;
  border: 1px solid #000000;
  padding: 15px;
}
Box Model Labeled Dimensions with border-box

Most developers find border-box easier to work with, so it is common to apply it to every element at the top of a stylesheet:

* {
  box-sizing: border-box;
}

CSS Shorthand Notation

CSS shorthand notation is generally considered best practice for conciseness and readability. However, longhand notation has its uses and can be more appropriate in certain situations where specificity is needed.

Summary: CSS Shorthand Declarations Using the margin Property
Longhand Shorthand 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
 
margin: 10px 20px 30px 40px;
 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
 
margin: 10px 20px 30px;
The right and left margins are the same at 20 pixels. 
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
 
margin: 10px 20px;
The top and bottom are the same (10 pixels) and right and left margins are the same (20 pixels). 
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
 
margin: 10px;
All sides of the margin are the same 10 pixels.
Common Border Shorthand 
border: 1px solid rgb(0 0 0 / 10%);

This applies a 1-pixel solid black border at 10% opacity around the element, which appears as a faint gray line.

Activity Instructions

Files

  1. In your week02 folder, open the file named box-model.html.
  2. In the styles subfolder within the week02 folder, open the CSS file named box-model.css.

HTML

  1. In the box-model.html HTML file, create a link to the CSS file box-model.css using the <link> tag.
    Make sure this <link> element is located within the <head> section.
    Check Your Understanding 
    <link rel="stylesheet" href="styles/box-model.css">
  2. Open the box-model.html file in Live/Five Server to view the changes as they happen in this activity.
    At this point, the HTML renders as shown here:
    Screenshot of box model HTML file at the start.
    Screenshot of Box Model HTML File Rendered in a Browser

CSS

  1. In the box-model.css file, write CSS declarations to style the HTML elements to match the style shown in this image:
    Screenshot of example solution for box model activity.
    Screenshot of Example Solution

    Note that the CSS rules have been started with the appropriate selectors:

    • the callout class
    • img element within the callout class
    • blockquote element
    • cite element
    Use the following summary of declarations as a guide:
    Declarations to Use for Each Selector
    Element Required CSS Declarations
    callout class maximum width, margin, border, padding, background color, and text color
    image float, margin, border, padding, background color, width, height
    blockquote margin
    cite display, top border, top padding, text alignment, size of font
  2. Compare your work to the example solution provided that is named box-model-solution.html.

    Did you notice the semantic HTML elements used to encase the scripture and scripture reference?

    The scripture was encased with a <blockquote> element instead of a generic <div> or <p> element

    The scripture reference was encased with a <cite> element.

    These elements give the content meaning. Browsers also apply some default styling: a <blockquote> is a block element with extra margins, and a <cite> is an inline element shown in italics.

    Do not worry if you did not use these in your design. Refactoring work as you discover new elements and methods is part of the overall development process.

Optional Solution Discussion

Optional Resources