CSS box model

The box model refers to the representation of an HTML element when shown on a browser, in terms of its:

• width (left to right length)
• height (top to bottom length)
• padding (inner spacing)
• border (boundary that separates an element's inner and outer space)
• margin (outer spacing)

In addition, there exist:

• overflow (whether an element's content spills over its borders) with values:
  • scroll (the browser will give the container a scroll bar)
  • auto (...scroll bar only if the content exceeds the container size)
  • hidden (the content will "disappear" beyond the container)
  • visible (the content will "spill over" beyond the container)
• overflow-x (restricts the overflow value to the horizontal dimension)
• overflow-y (restricts the overflow value to the vertical dimension)

Width and height

Self-explanatory, the width refers to the left-right length of an element, e.g.:

div.example {
  width: 250px;
}

Also, the height refers to the top-bottom length of an element, e.g.:

div.example {
    height: 100%;
}

Min and max

If we had previously specified the height and the width, the following properties could still override those dimensions already placed on the selector:

• min-height
• min-width
• max-height
• max-width

For example:

div.example {
  height: 140px;
  width: 90px;
}

div.example {

  /* ensures the div is at least 50px tall */
  min-height: 50px;

  /* ensures the div is at most 100px tall */
  max-height: 100px; 
  
  /* ensures the div is at least 100px wide */
  min-width: 100px; 
  
  /* ensures the div never extends beyond the full width of its container */
  max-width: 100%; 
  
}

These "min" and "max" properties work especially better if the initial height and width properties used percentages; at some point:

• a 25% width might be "too narrow" (in which case, we would use a min-width in pixels)
• a 100% width might be "too wide" (in which case, we would use a max-width in pixels)!

Paddings

The padding refers to the inner whitespace of a container; it literally pads the content from the container's edges:

div.example {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Shorthand

Also, the following shorthand notations remain popular among developers, as each pair of "top and bottom" and "left and right" paddings often have the same values:

div.example {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

/* clockwise shorthand */
div.example {
  padding: 20px 10px 20px 10px;
}

/* top-bottom left-right shorthand */
div.example {
  padding: 20px 10px;
}

Margins

The margin refers to the outer whitespace of a container; the container's size does include this region that separates the container from all other adjacent HTML elements!

div.example {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

div.example {
  margin: 10px 20px;
}

We notice in the above that the notation of margins imitate those of the paddings; also:

div.topcontainer {
  margin-bottom: 50px;
}

div.bottomcontainer {
  margin-top: 25px;
}

...that is, for an HTML that has:

<div class="topcontainer">...</div>
<div class="bottomcontainer">...</div>

Collapsing margins

When two margins meet, the smaller margin combines with the larger margin:

• a 50px space will appear between the two <div> elements instead of 75px!

"Auto" centering margins

Using auto for the margin in the left-right value centers it horizontally:

div.centered {
    margin: 0 auto; 
}

Recall that this is really just shorthand for:

div.centered {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

Borders

The border refers to the space between the outer margin and the inner padding:

div.example {
  border-width: 10px;  
  border-style: solid; 
  border-color: red;  
}

div.example {
  border: 10px solid red; /* width + style + color */
}

As with paddings and margins, the border property has a shorthand but its own notation!

Border width

This "border thickness" property usually has an amount in pixels (px) but can use essentially any other units of distance!

Border style

The border style refers to the border's appearance and takes one value out of a closed set:

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* CLOCKWISE SHORTHANDS */

/* all four sides are solid */
border-style: solid;

/* top and bottom are dotted | left and right are solid */
border-style: dotted solid;

/* top is hidden | left and right are double | bottom is dashed */
border-style: hidden double dashed;

/* top is none | right is solid | bottom is dotted | left is dashed */
border-style: none solid dotted dashed;

Border color

Self-explanatory and can take on any of the CSS color notations:

div.example {
  border-color: red;
  border-color: #990000;
  border-color: rgb(255, 0, 0);
  border-color: hsl(0, 50%, 50%);
}

Border radius

Furthermore, the border can have rounded edges with the border-radius property:

div.example {
  border-radius: 5px;
}

A border can become a circle with a border-radius value of 50%:

div.example { 
    border-radius: 50%;
}

We can even choose which corner can have border "radii":

div.example {
  border-top-left-radius: 10%;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 40%;
}

div.example {
  border-radius: 10% 20% 30% 40%;
}

The latter selector, of course, represents the "clockwise shorthand" for the former selector in the example above!

Overflows

The overflow refers to how much content the container will display:

div.example {
  /* browser will show a scrollbar on the div */
  overflow: scroll; 
}

div.example {
  /* browser will show a scrollbar only when necessary */
  overflow: auto; 
}

div.example {
  /* content will 'disappear' after the end of the container */
  overflow: hidden; 
}

div.example {
  /* content will 'spill over' after the end of the container */
  overflow: visible;
}

There also exist overflow-x and overflow-y to limit the overflow value in, respectively, the horizontal and vertical directions!

• overflow-x will apply to the horizontal (left-right) direction
• overflow-y will apply to the vertical (top-bottom) direction