Css
utility classes

Setting margins

Margins are defined using special fixed patterns which can be for negative or positive margins. The margins are set based on pixels. The horizontal margins are denoted with the mx class while the vertical margins are denoted with mv class. In situations where both horizontal and vertical margins are expected to be applied at equal margin, the mxv class is employed. Negative margins uses the n identifier. Hence, a negative margin of 10 pixels on an horizontal axis will be denoted as mxn-10. Margins can also be applied for left or right sides on either the horizontal axis and top or bottom sides or vertical axis. The margin applied on contents uses the 1, 2, 3, 4, 5 6, 8, 10, 12, 14, 15, 16, 18 and 20 unit identifiers. Each of these digits reflects the margin distance given on any side defined. The list below are the list of margin purpose identifiers.

  • mxs- - applies margin on both sides on the horizontal axi
  • mxl- - applies margin on the left side on the horizontal axis
  • mxr- - applies margin on the right size on the horizontal axis
  • mxl-n - applies negative margin on the left side on the horizontal axis
  • mxr-n - applies negative margin on the right side on the horizontal axis
  • mvs- - applies margin on both sides on the vertical axis
  • mvt- - applies top margin on the vertical axis
  • mvb- - applies bottom margin on the vertical axis
  • mvt-n - applies negative top margin on the vertical axis
  • mvb-n - applies negative bottom margin on the vertical axis
The example below reveals how to apply a margin of 2 pixels on any of the margin identifiers above:

  • mxs-2 - applies margin of 2 pixels on both sides on the horizontal axi
  • mxl-2 - applies margin of 2 pixels on the left side on the horizontal axis
  • mxr-2 - applies margin of 2 pixels on the right size on the horizontal axis
  • mxl-n2 - applies negative margin of 2 pixels on the left side on the horizontal axis
  • mxr-n2 - applies negative margin of 2 pixels on the right side on the horizontal axis
  • mvs-2 - applies margin of 2 pixels on both sides on the vertical axis
  • mvt-2 - applies top margin of 2 pixels on the vertical axis
  • mvb-2 - applies bottom margin of 2 pixels on the vertical axis
  • mvt-n2 - applies negative top margin of 2 pixels on the vertical axis
  • mvb-n2 - applies negative bottom margin of 2 pixels on the vertical axis
Note:
Although, these margins may be fixed, other margins can be applied from the bootstrap library.