Boxes & borders cheat sheet

The Box Model

  • The CSS Box Model

    • An illustration of the box-model properties

    • Starting at the content and working out:

    • padding — space between the content & box edge; background-color fills behind this space.

    • border — line around the edge of the box.

    • margin — space outside the box, pushing other boxes away; can see through margin to what’s behind.

  • Margin & padding number order

    • An illustration of the margin/padding value system

    • margin & padding can take 1–4 values.

    • With 4 values, we start at the top and continue clockwise around the box.

    • /* 10px on all four sizes of the box */
      margin: 10px;
      /* 10px top/bottom; 12px left/right */
      margin: 10px 12px;
      /* 10px top; 12px left/right; 14px bottom */
      margin: 10px 12px 14px;
      /* 10px top; 12px right; 14px bottom; 16px left */
      margin: 10px 12px 14px 16px;
      
    • The same system applies completely to padding

Box dimensions

  • margin

    • Create space outside the box, pushing other boxes.

    • /* See above for examples of the value system */
      margin: 1.125em;
      margin: 1.125em 1em;
      
    • Target each side individually: margin-top, margin-right, margin-bottom, margin-left

    • margin-top: .875em;
      margin-bottom: 0;
      
  • negative margins

    • Because margins are outside of a box they can actually have negative numbers.

    • Instead of pushing other boxes away, negative margins pull the box in a specific direction.

    • margin-left: -5rem;
      
    • Will pull the box to the left by 5em and can cause elements to overlap.

  • padding

    • Create space inside the box, pushing text away from the edge.

    • /* See above for examples of the value system */
      padding: 1em;
      margin: 1em .8em;
      
    • Target each side individually: padding-top, padding-right, padding-bottom, padding-left

    • padding-left: 1em;
      padding-right: .875em;
      
  • width

    • Control the horizontal space of a box.

    • width: 100px;
      width: 50%; /* of the element its inside */
      width: 100vw; /* Full width of the window */
      
  • height

    • Controls the vertical space of a box.

    • Setting a height should be avoided at all costs.

    • Let the content inside the box dictate the height.

    • height: 25px; /* BAD! */
      
  • min-width

    • Make a box be at least a certain width, but can expand.

    • min-width: 100px;
      
  • min-height

    • Make a box at least a certain height, but can expand.

    • This is infinitely better than just height

    • min-height: 12em;
      min-height: 75vh; /* 75% height of the window */
      
  • overflow

    • Control how elements that break out the edges of the box are dealt with.

    • One of: visible, hidden, scroll, auto

    • overflow: hidden; /* Chop off everything */
      overflow: auto; /* Introduce a scrollbar if necessary */
      
    • Also contorl a single direction: overflow-x, overflow-y

    • overflow-x: hidden;
      overflow-y: scroll;
      
  • calc()

    • Sometimes we can’t calculate a value ahead of time because it depends on something the browser knows but we don’t, e.g. adding em + px together.

    • width: calc(100vw - 10px);
      padding-left: calc(1.4em + 24px);
      
    • Always have a space around the math operator!

    • width: calc(100vw-10px); /* Not gonna work */
      

Colours & borders

  • color

    • Set the colour of the text.

    • color: red;
      color: #fff;
      
  • background-color

    • Set the colour of the box, behind the text.

    • background-color: orange;
      background-color: #e2e2e2;
      
      /* Semi-transparent colour */
      background-color: rgba(0, 0, 0, .5);
      
  • border-width

    • Control the thickness of the stroke around a box.

    • border-width: 12px;
      
      /* Or use em if you want it to scale with the text size */
      border-width: .1em;
      
  • border-color

    • Set the colour of the box stroke.

    • border-color: indigo;
      border-color: #f33;
      
  • border-style

    • Set the visual appearance of the line.

    • Possible values: solid, dashed, dotted, double, groove, ridge, inset, outset

    • border-style: solid;
      border-style: dotted;
      
  • border shorthand

    • A short form version for setting the three border properties.

    • border:

    • border-width

    • border-style

    • border-color

    • border: 3px solid black;
      border: 4px dotted green;
      
  • Borders on single sides

    • Target each side of the box using border-* properties.

    • border-top, border-right, border-bottom, border-left

    • border-top: 3px solid indigo;
      border-bottom: 3px solid indigo;
      
    • There’s also all the other singular properties like border-top-width, border-bottom-style but I rarely use those.

  • border-radius

    • Make the corners of the box slightly rounded.

    • border-radius: 4px;
      border-radius: .3em;
      
    • Control each side differently, start on top-left, go clockwise around.

    • border-radius: 4px 6px 10px 12px;
      
    • Do ovals using a / to separate the different axes

    • border-radius: 4px/10px;
      
    • Border-radius generator.

  • opacity

    • Make the whole box and all its content semi-transparent.

    • A number between 0 & 1

    • opacity: .5;
      opacity: .2;
      
  • box-shadow

    • Create a drop-shadow behind the box.

    • Requires at least 3 values:

    • box-shadow:

    • horizontal-offset

    • vertical-offset

    • • optionally: blur-radius

    • • optionally: spread-radius

    • color

    • box-shadow: 2px 2px black;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
      box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, .5);
      
      /* Move the shadow inside the box with inset */
      box-shadow: inset 2px 2px black;
      
    • Box-shadow generator.

  • Multiple box-shadows

    • Separate each box-shadow with a comma.

    • box-shadow: 2px 0 red, -2px 0 green;
      
  • outline

    • Like a border, but outside border, doesn’t take up space, will overlap surrounding elements.

    • outline: 3px solid black;
      
    • outline-offset — will push the outline away from the box edge.

    • outline-offset: 2px;
      

Box sizing systems

  • box-sizing: content-box

    • Do not use content-box

    • The default box calculation math puts the padding & border outside the width set in CSS.

    • This causes all sorts of confusing math solutions on responsive sites and just makes our coding life annoying.

    • Example calculation:

    • /*
        Total width of box is 130px:
        100px + 10px (left) + 10px (right) + 5px (left) + 5px (right) = 130px
      */
      .box {
        width: 100px;
        padding: 10px;
        border-width: 5px;
      }
      
  • box-sizing: border-box

    • Always use border-box

    • Simplifies the responsive math by making the width of a box, as set in CSS, not change by adding padding and border.

    • Always include this snipped of CSS!

    • /* This snipped of CSS should always be included */
      html {
        box-sizing: border-box;
      }
      
      *, *::before, *::after {
        box-sizing: inherit;
      }
      
    • Example calculation:

    • /*
        Total width of box is: 100px, defined by width
      */
      .box {
        width: 100px;
        padding: 10px;
        border-width: 5px;
      }
      
  • Border box vs. content box

    • An illustration of border-box vs. content-box

Display & layout

See the CSS layout cheat sheet for more detail.

  • display: inline

    • Flows content together, fitting on the same line if possible.

    • margin, padding, width don’t work.

  • display: block

    • Takes up a whole line by itself.

    • margin, padding, width do work.

  • display: inline-block

    • A hybrid between block & inline: fits on the same line, allows padding, width, etc.

  • display: none

    • Completely hide the element from the page.

    • Set to another display value to make it visible again.