Lesson 6: Box Model Sizing

Overview

The last lesson described the CSS box model for HTML elements. This lesson explains how to size the regions of the box model. There is some complexity to this sizing, since we can set the sizes of each side of the box model individually. To allow this flexibility, requires some intricacies that will be explained in this lesson.

Sizing Four Sides Individually

In this first example, we have the padding designated with four values: 10px 20px 40px 80px. Each of these values specifies the padding one of the sides in order: top, right, bottom, and left. This order is illustrated in the example below and it applies to all three properties: padding, border-width, and margin. We will illustrate the border and margin in a later example.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <img style="padding: 10px 20px 40px 80px;
      border:5px black solid;
      background-color:gold; width:640px; height:437px;"
      src="EcceAgnusDei_AlbertChevalierTayler.png" />
  </body>
</html>

Output

Specifying Only Three Values

This next example removes one of the sizes for the sides to illustrate what happens when only three size values are specified for the sides. In this case, one of the sizes is doubled up and used for two sides. In fact, it is the middle value is used to designate the padding for both sides as shown below. The first and third values are still used for the top and bottom, respectively.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <img style="padding: 10px 20px 40px;
      border:5px black solid;
      background-color:khaki; width:640px; height:423px;"
      src="TheValeOfTears_GustaveDore.png" />
  </body>
</html>

Output

Specifying Only Two Values

This example removes another one of the sizes for the sides to illustrate what happens when only two size values are specified for the sides. In this case, both of the sizes are doubled up and used for two sides. The first values is used for the top and bottom, and the second value is used for the sides, as shown. This finishes up all of the cases, since using only onw value specifies the size for all four sides, as we have seen before.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <img style="padding: 10px 20px;
      border:5px black solid;
      background-color:sienna; width:640px; height:423px;"
      src="DanielInTheLionsDen_BritonRiviere.png" />
  </body>
</html>

Output

Sizing One Side at a Time

The main padding property allows us to size each side individually. However, it does not allows us to set the size for a specific side. To do that, we can make use of specialized properties that are made for that purpose. These properties append a side name to qualify which side is being set. These propeties are illustrated in the example below for the padding property.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <img style="padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 80px;
      border:5px black solid;
      background-color:khaki; width:640px; height:493px;"
      src="EcceHomo_AntonioCiseri.png" />
  </body>
</html>

Output

Sizing the Padding, Border, and Margin

We can use multiple values with all three regions: padding, border, and margin. In this example, we have each region size with four values using the corresponding property. Note that for the border, we use the border-width property because the border is used to set the width, style, and color all at once.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <div style="border:1px black solid;float:left;">
      <img style="padding: 10px 20px 40px 80px;
        border-width:40px 30px 20px 10px;
        border-color:black;
        border-style:solid;
        margin: 15px 5px 20px 10px;
        background-color:skyblue; width:640px; height:377px;"
        src="Pentecost_JeanIIRestout.png" />
    </div>
  </body>
</html>

Output

Sizing the Padding, Border, and Margin One Side at a Time

To complete the set of examples and to make sure that the syntax is clear, one last example is included to demonstrate the remaining cases. This example demonstrates how to specify the sizing for the padding, border, and margin, one side at a time. Note, again, that the border syntax is slightly different in that we need to specifying the side in the middle of the property. So, we specify the top border via the border-top-width property, for example.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <div style="border:1px black solid;float:left;">
      <img style="padding-left: 20px;
        border-right-width:20px;
        border-top-width:30px;
        border-color:black;
        border-style:solid;
        margin-bottom: 20px;
        background-color:skyblue; width:640px; height:310px;"
        src="ChristianDirce_HenrykSiemiradzki.png" />
    </div>
  </body>
</html>