Styling the four sides

At times we might want elements to have different values for padding, borders, or margins of the top, right, bottom, and left sides.

Properties that can take different numbers of values

Each of following properties can take different numbers of values:

  • padding
  • margin
  • border-width
  • border-style
  • border-color

The number of values to specify depends on which sides are styled in the same way. The table below specifies which margins are styled by which value. When there is more than one margin listed for a value, it means that all those margins are styled in the same way.

Number of values First Second Third Fourth
4 top right bottom left
3 top right, left bottom
2 top, bottom right, left
1 top, right, bottom, left

Individual properties for different sides of the box

If that weren't confusing enough, there are even more options listed below.

Glimpse of the future

In the module on cascading, we'll see why these come in handy. For now, just keep in mind that they exist.

Padding or margins can be styled separately for the four sides, using properties such as padding-bottom and margin-left.

It is possible to refer to the four borders individually as border-top, border-right, border-bottom, and border-left, and for each of those, individual aspects, such as border-bottom-color and border-top-style.