Lesson 1: Understanding the Box Model in CSS

Overview

Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li, table, th, td. Each of these is a container, or box. Each box has three layers that surround its content. The layers are, in order from inside to outside:

• Padding
• Border
• Margin

In this lesson you will learn more about the box model, and how to work with it when applying styles to content using CSS.

Learner Outcomes

At the completion of this exercise:

• you will be able to identify the difference between margin, border, and padding in CSS.

More on the Box Model

The following illustration shows the various layers in the box model:

The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).

For example, consider the following <p>, which is wrapped inside a <div>:

  <div>
    <p>This is a paragraph. It is a very short paragraph.</p>
  </div>

We can apply the following CSS to the paragraph tag in order to control the size of the padding, border, and margin of the paragraph:

  div { 
    background-color: red;
    padding: 0;
    border: 1px solid black;
    margin: 0;
  }
  p { 
    background-color: white;
    padding: 1em;
    border-width: 10px; 
    border-style: solid;
    border-color: blue;
    margin: 10px !important;
   }   

Here's what it looks like:

Here are a few tips:

• You can specify one value for padding, border, or margin (for example, padding:5px), and that value will apply to all sides of the box.
• Alternatively, you specify a unique value for each side, such as padding-left, border-right, and margin-right.
• For padding and margin, you can use shorthand by specifying each of the four sides in a single style declaration, like this:
  padding: 1em 1.5em 5% 10px;
  The four values are for the top, right, bottom, and left (clockwise around the box, starting at the top)
• Borders can also be specified using shorthand, like this:
  border: 1px solid black;
  These three values represent the border-width, border-style, and border-color.
• The border-style property can have any of the following values:
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
• If the above styles mostly look alike, there are two reason why.
  • The color or size is such that the style won't show.
  • The browser doesn't support it.

Activities

• Be sure you understand the box model as described above. If anything's confusing, ask your instructor for help.
• Study the W3School CSS Reference. Particularly explore the Border and Outline Properties, Margin Properties, and Padding Properties. These are all properties that you can experiment with when working with your web portfolio in the next lesson. Note that each of the properties in the Reference tables includes a CSS version number, 1, 2, or 3. CSS 3 is the latest version of CSS, and has some of the coolest features, but these won't work in older browsers (in fact, some CSS3 properties won't work in newer browsers either) but you can still play with them.
• Complete the following:
1. Open your template from a previous unit in the text editor and perform a "save as" using the name yourLastName_boxModel.html. Save it in your Portfololio folder.
2. Change the text within the title tags to YourName - Box Model.
3. Change the text within the h1 tags to yourName's Box Model Example.
4. Add the paragraph text located below to the body of the file enclosed in a p tag. Add div tags around the paragraph.
5. Add the style opening and closing tags to the heading section. Since this is a single file, you don’t need an external style; embedded is fine.
6. Define the padding, border, and margin for the div tag as well as the width of the box.
7. Define the color and style of the border.
8. Define a background color for the box.
9. Save the file and validate. Note: Because your css is embedded, you'll need to copy and paste your css into the css validator seperately Fix your errors, if necessary. Attach your file to the assignment in Google Classroom.

Paragraph Text

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements.

Handouts/Online Documents

• W3School CSS Reference

All done?

Proceed to Lesson 2.