Box Model Shorthand

1, 2, 3, Or 4 Sizes For Margins and Padding (...and Borders)

This also applies to the border property but only when being applied on a per property basis (this is covered later in this lesson)

K05a - (2:09)
- Shorthand is the best way to specify padding and margin sizes because it saves code and is easier to read.
- To use shorthand, provide padding or margin size(s) measured in px, em, or %.
- The padding & margin shorthand properties recognize multiple values and will apply them as follows:
  - 1 value = all four sides
  - 2 values = top/bottom, right/left
  - 3 values = top, both sides, bottom
  - 4 values = top, right, bottom, left
    - mnemonic device (a way to remember something):
      TRouBLe

Padding and Margin Shorthand

K05b - (3:45)

Example of using margin shorthand:

First, in this example, all sides have their margins specified individually:

   .item {
      margin-top: 15px;
      margin-bottom: 20px;
      margin-left:  5%;
      margin-right:  5%;
    }

The above can be written using shorthand as follows. The right and left values being the same, they are both represented by the second of the three values. The first and third value are the top and bottom values.

   .item {
      margin: 15px 5% 20px;
    }

Centering using margins

The margin value auto is often used to center content horizontally. To accomplish it, the auto value is used as both the left and right side margin value. The section of this web page that you are looking at right now with white background is centered in the same manner as the following example. The css code below is what is being used to center the div:


     div {
     margin: 0 auto;
     }

This div is centered horizontally using auto for its left and right side margin values.

Border Shorthand

Applying Border Properties On A Per Side Basis

K05c - (3:44)

Border property values

All three border properties are listed below. They can be specified per side using shorthand. The style property is required otherwise the border will not appear. The values must be in the following order, even if either the width or color are excluded:

Width

Percentage ( % ) will not work. If used the border will not appear.
The default value is medium.

Style

Required, otherwise the border will not be visible - there is no default.

Color

If color is not specified, the color property (text color) will be used for the border.

Applying up to three border properties to all sides, or to individual sides, can be done using the three values listed above and the shorthand properties below. (The links go to information about these properties at the W3C).

border

border
- This shorthand property will apply up to three border properties to all (and no fewer) sides.
- You cannot use this property to specify anything on a per side basis.
- The following would make the borders on all sides have the same values as shown:

       border: thin solid #053;

The following will be apply to the top border all three border properties specified:

       border-top: 3px double #030;

If you apply all three properties to all sides using the border shorthand property, you can override one of them by putting the declaration after the shorthand declaration. Example:

       border: 2px inset #030;
       border-bottom-color: #A5D790;

Applying Border Properties On a Per Property Basis

K05d - (2:34)

border-width

border-width shorthand options:
- border-width: 1em;
  - All borders will be 1em wide.
- border-width: 2px 2em;
  - The top and bottom borders will be 2px , the left and right borders will be 2em.
- border-width: 3px thin 5px;
  - The top border will be 3px, the left and right will be thick, and the bottom 5px.
- border-width: 1em 2px 3em 3px;
  - The top border will 1em wide, the left 2px, the bottom 3em,, and the left 3px wide.

border-style

border-style shorthand options:
- border-style: solid;
  - All sides have a solid border
- border-style: solid ridge;
  - The top and bottom sides have a solid border.
  - The right and left sides have a ridge border.
- border-style: solid ridge dashed;
- border-style: solid ridge dashed double;
  - The top has a solid border.
  - The right side has a ridge border.
  - The bottom has a dashed border.
  - The left side has a double border.

border-color

border-color shorthand options:
- border-color: #000
  - All four sides will have black (#000) borders.
- border-color: #0AF90B blue
  - The top and bottom borders will be #0AF90B
  - The side borders will be blue.
- border-color: black gray #65AD19
  - The top border will be black
  - The side borders will be gray
  - The bottom border will be #65AD19
- border-color: red #0FF blue #A56B94
  - Top border will be red
  - The right border will be magenta (#0FF)
  - The bottom border will be blue
  - The left border will be #A56B94