Box Model CSS

Box properties allow the author to control the presentation of generated boxes for document elements, including dimensions, margins, padding, and borders.

Implementing the Box Model

The box model is best demonstrated with a short example. The calculation we’ll use to ascertain the total space required to accommodate an element on the page (ignoring margin collapse for the time being—see below for more on this) will be as follows:

Total width = left margin + left border + left padding + width +
                   right padding + right border + right margin

Total height = top margin + top border + top padding + height +
                   bottom padding + bottom border + bottom margin
Here’s our example CSS—a rule set that contains declarations for all the box properties of an element that has the class "box":

.box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #000;
  margin: 15px;
}
The total size of the element above will be calculated as follows:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Margins:

These properties allow the author to control a box’s margin—the area outside its border.

margin-top:
Sets the top margin on of an element.

margin-right:
Sets the right margin of an element.

margin-bottom:
Sets the bottom margin on of an element.

margin-left:
Sets the left margin on of an element.

margin:
A shorthand property that sets the margin on all four sides of an element.

Padding:

These properties allow the author to control a box’s padding—the area between its content and its border.

padding-top:
This property that sets the padding for the top side of an element.

padding-right:
Sets the padding for the right side of an element.

padding-bottom:
This property that sets the padding for the bottom side of an element.

padding-left:
Sets the padding for the left side of an element.

padding:
Sets the padding for all four sides of an element.

Dimensions:
These properties allow us to control the height and width of element boxes.

height
Sets the content height of a block or a replaced element.

min-height
Sets the minimum content height of a block or a replaced element.

max-height
Sets the maximum content height of a block or a replaced element.

width
Sets the content width of a block or a replaced element.

min-width
Sets the minimum content width of a block or a replaced element.

max-width
Sets the maximum content width of a block or a replaced element.

Borders and Outlines:

Border properties allow the author to control a box’s border—the area between its padding and its margins.

border-top-color
Sets the color for the top border of an element.

border-top-style
Sets the style for the top border of an element.

border-top-width
Sets the width for the top border of an element.

border-top
Sets the width, color, and style for the top border of an element.

border-right-color
Sets the color for the right-hand border of an element.

border-right-style
Sets the style for the right-hand border of an element.

border-right-width
Sets the width for the right-hand border of an element.

border-right
Sets the width, color, and style of the right-hand border of an element.

border-bottom-color
Sets the color for the bottom border of an element.

border-bottom-style
Sets the style for the bottom border of an element.

border-bottom-width
Sets the width for the bottom border of an element.

border-bottom
Sets the width, color, and style on the bottom border of an element.

border-left-color
Sets the color for the left-hand border of an element.

border-left-style
Sets the style for the left-hand border of an element.

border-left-width
Sets the width for the left-hand border of an element.

border-left
Sets the width, color, and style to the left-hand border of an element.

border-color
Sets the border color for all four borders of an element.

border-style
Sets the style for all four borders of an element.

border-width
Sets the width for all four borders of an element.

border
Sets the width, color, and style for all four borders on an element.

outline-color
Sets the color of an outline.

outline-style
Sets the style of an outline.

outline-width
Sets the width of an outline.

outline
Shorthand property that sets an outline on an element.