Box model in CSS

在 CSS 中可define the size and behavior of the HTML element

#border-bottom-width

Like border-width, but for the bottom border only.

默认属性 border-bottom-width: 0;

Removes the bottom border.

border-bottom-width: 4px;

You can use pixel values.

#border-left-width

Like border-width, but for the left border only.

默认属性 border-left-width: 0;

Removes the left border.

border-left-width: 4px;

You can use pixel values.

#border-right-width

Like border-width, but for the right border only.

默认属性 border-right-width: 0;

Removes the right border.

border-right-width: 4px;

You can use pixel values.

#border-top-width

Like border-width, but for the top border only.

默认属性 border-top-width: 0;

Removes the top border.

border-top-width: 4px;

You can use pixel values.

#border-width

Defines the width of the element's borders.

border-width: 1px;

Defines the width of all borders to 1px.

border-width: 2px 0;

Defines the top and bottom borders to 2px, the left and right to 0.

#box-sizing

Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

默认属性 box-sizing: content-box;

The width and height of the element only apply to the content of the element.

For example, this element has

  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.

box-sizing: border-box;

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

For example, this element has

  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 200px, no matter what.

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px - 24px = 116px.

#height

Defines the height of the element.

默认属性 height: auto;

The element will automatically adjust its height to allow its content to be displayed correctly.

height: 100px;

You can use numeric values like pixels, (r)em, percentages...

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

#line-height

Defines the height of a single line of text.

默认属性 line-height: normal;

Reverts to the default value of the browser.

recommended line-height: 1.6;

You can use unitless values: the line height will be relative to the font size.

line-height: 30px;

You can use pixel values.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

#margin-bottom

Defines the space outside the element, on the bottom side.

默认属性 margin-bottom: 0;

Removes any margin at the bottom.

margin-bottom: 30px;

You can use pixel values.

margin-bottom: 2em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

margin-bottom: 10%;

You can use percentage values.
The percentage is based on the width of the container.

#margin-left

Defines the space outside the element, on the left side.

默认属性 margin-left: 0;

Removes any margin on the left.

margin-left: 50px;

You can use pixel values.

margin-left: 7em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

margin-left: 30%;

You can use percentage values.
The percentage is based on the width of the container.

margin-left: auto;

The auto keyword will give the left side a share of the remaining space.

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

#margin-right

Defines the space outside the element, on the right side.

默认属性 margin-right: 0;

Removes any margin on the right.

margin-right: 50px;

You can use pixel values.

margin-right: 7em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

margin-right: 30%;

You can use percentage values.
The percentage is based on the width of the container.

margin-right: auto;

The auto keyword will give the right side a share of the remaining space.

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

#margin-top

Defines the space outside the element, on the top side.

默认属性 margin-top: 0;

Removes any margin at the top.

margin-top: 30px;

You can use pixel values.

margin-top: 2em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

margin-top: 10%;

You can use percentage values.
The percentage is based on the width of the container.

#margin

Shorthand property for margin-top margin-right margin-bottom and margin-left.

默认属性 margin: 0;

Removes all margins.

margin: 30px;

When using 1 value, the margin is set for all 4 sides.

margin: 30px 60px;

When using 2 values:

  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

margin: 30px 60px 45px;

When using 3 values:

  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

margin: 30px 60px 45px 85px;

When using 4 values:

  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.

#max-height

Defines the maximum height the element can be.

默认属性 max-height: none;

The element has no limit in terms of height.

max-height: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum height is larger than the element's actual height, the max height has no effect.

max-height: 100px;

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

#max-width

Defines the maximum width the element can be.

默认属性 max-width: none;

The element has no limit in terms of width.

max-width: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum width is larger than the element's actual width, the max width has no effect.

max-width: 150px;

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

#min-height

Defines the minimum height of the element.

默认属性 min-height: 0;

The element has no minimum height.

min-height: 200px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum height is larger than the element's actual height, the min height will be applied.

min-height: 5px;

If the minimum height is smaller than the element's actual height, the min height has no effect.

#min-width

Defines the minimum width of the element.

默认属性 min-width: 0;

The element has no minimum width.

min-width: 300px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum width is larger than the element's actual width, the min width will be applied.

min-width: 5px;

If the minimum width is smaller than the element's actual width, the min width has no effect.

#padding-bottom

Defines the space inside the element, on the bottom side.

默认属性 padding-bottom: 0;

Removes any padding on the bottom.

padding-bottom: 50px;

You can use pixel values.

padding-bottom: 7em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

padding-bottom: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-left

Defines the space inside the element, on the left side.

默认属性 padding-left: 0;

Removes any padding on the left.

padding-left: 50px;

You can use pixel values.

padding-left: 7em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

padding-left: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-right

Defines the space inside the element, on the right side.

默认属性 padding-right: 0;

Removes any padding on the right.

padding-right: 50px;

You can use pixel values.

padding-right: 7em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

padding-right: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-top

Defines the space inside the element, on the top side.

默认属性 padding-top: 0;

Removes any padding on the top.

padding-top: 50px;

You can use pixel values.

padding-top: 7em;

You can use (r)em values.

The value is relative to the font size:

  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size

padding-top: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding

Shorthand property for padding-top padding-right padding-bottom and padding-left.

默认属性 padding: 0;

Removes all paddings.

padding: 30px;

When using 1 value, the padding is set for all 4 sides.

padding: 30px 60px;

When using 2 values:

  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

padding: 30px 60px 45px;

When using 3 values:

  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

padding: 30px 60px 45px 85px;

When using 4 values:

  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.

#width

Defines the width of the element.

默认属性 width: auto;

The element will automatically adjust its width to allow its content to be displayed correctly.

width: 240px;

You can use numeric values like pixels, (r)em, percentages...

width: 50%;

If you use percentages, the value is relative to the container's width.