Margins, borders and padding is a definition in typography, an art and technique of arranging type in order to make the language it forms most appealing to transparent learning and recognition.

The use of typography even dates back from 2nd millenium BC! Today typography is commonly found while browsing websites through a programming document called CSS (Cascading Style Sheets). In combination with HTML (Hypertext Markup Language), this new way of typography makes everyday websites look beautiful.

Padding Example

Like layers in an onion, margins, borders and paddings wrap around an object. They can also be manipulated to display various properties such as colors, radius, thickness etc.

photoframe {
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px; 
  margin: 5px 5px 5px 5px;  /* top right bottom left */
  margin: 5px 5px;          /* top-bottom left-right */
  margin: 5px;              /* all sides */
 
  border: 10px solid white; /* 10 pixels solid white border */
  border-radius: 3px;     /* rounded corners with 3px radius */
 
  padding: 10px;            /* padding of 10 pixels on all sides */
}

Like the example above for margins, there are multiple ways to write margin in CSS. Lines 2-5 can be rewritten by line 6, using just the margin declaration and following the order of top, right, bottom, left. It can also be rewitten as line 7 which only declares two values, thus the values reflect equal sides, such as top-bottom and left-right. Finally if the value is equal on all sides, a shorthand method can just declare the value once. These rules also apply to borders and paddings.