DCSS - The CSS Box Model [LESSON]

CSS Basic Box Model

Browsers render each element as a rectangular box and CSS determines the properties for the box.

Content Area

The "real" content, such as text, image, video player, etc.

Padding Area

Spacing added within an element. Padding is transparent.

Border Area

Borders that can be added to the element, it starts at the edge of the padding.

Margin Area

Spacing added around an element. Margin is transparent.

Box-sizing:

Sets how the total width and height of an element are calculated.

box-sizing: content-box; width: 100%;

Content-box

Is the default CSS box-sizing behavior. You can set the size of the box with this. If there is a padding or border added, it will be outside of this box size. If the content-box is 50 pixels wide, then the content will be 50 pixels and the padding will be added to the outside of the 50 pixels and then the border outside of that.

box-sizing: content-box; width: 50px;

Width:

Pixels or Percentages

Sets the width of the element.

width: 150px;

Min-width:

Pixels or Percentages

Sets the minimum width of the element.

min-width: 150px; or  min-width: 75%;

Max-width:

Pixels or Percentages

Sets the maximum width of an element.

max-width: 150px; or  max-width: 75%;

Height:

Pixels or Percentages

Sets the height of the element.

height: 150px; height: 75%;

Min-height:

Pixels or Percentages

Sets the minimum height of the element.

min-height: 150px; or  min- height: 75%;

Max- height:

Pixels or Percentages

Sets the maximum height of an element.

max- height: 150px; or  max- height: 75%;

Padding:

Pixels

Sets the padding size in this order: top, right, bottom, left.

padding: 5px 10px 5px 10px;

Shorthand- padding: 5px 10px; (this sets top and bottom at 5px and right and left at 10px)

Shorthand- padding: 5px; (this sets all around 5 px;

Padding-top:

em, percentage, or pixels

Sets the top padding amount.

padding-top: 1em;

Padding-right:

em, percentage, or pixels

Sets the right padding amount.

padding-right: 10%;

Padding-bottom:

em, percentage, or pixels

Sets the bottom padding amount.

padding-bottom: 10px;

Padding-left:

em, percentage, or pixels

Sets the left padding amount.

padding-left: 5em;

Border-style:

Dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden

Sets the kind of border to display.

Border-style: dashed solid double dotted; (the top will be dashed, the right solid, the bottom double, and the left dotted).

Border-width:

Thick, medium, thin, px, em

Sets the width of the border.

/* top | right | bottom | left */

border-width: 1px 2em 0 4rem;

Border:

width, style, and color

Shorthand property that sets the border-width, border-style, and border-color.

border: thick double #32a1ce;

/*thick double-border that is blue*/

Margin:

em, px, percentage

Shorthand property that sets the margin area on all 4 sides of the element – top, right, bottom, and left

margin: 10px 50px 20px 0;

(margin around the element will be 10 px at the top, 10 px on the right, 20 px on the bottom, and 0 margin on the left).

Margin-top:

em, px, percentage

Sets the margin at the top of the element.

Margin-top: 10px;

Will set 10 pixels of space at the top of the element (above the element).

Margin-right:

em, px, percentage

Sets the margin at the right of the element.

Margin-right: 10em;

Will set 10 em of space at the right of the element.

Margin-bottom:

em, px, percentage

Sets the margin at the bottom of the element.

Margin-bottom: 10%;

Will set 10% of space at the bottom of the element (below the element).

Margin-left:

em, px, percentage

Sets the margin at the left of the element.

Margin-left: 10px;

Will set 10 pixels of space at the left of the element.