{"id":27704,"date":"2020-10-30T12:00:16","date_gmt":"2020-10-30T16:00:16","guid":{"rendered":"https:\/\/blog.logrocket.com\/?p=27704"},"modified":"2021-07-26T15:07:54","modified_gmt":"2021-07-26T19:07:54","slug":"css-reference-guide-margin","status":"publish","type":"post","link":"https:\/\/blog.logrocket.com\/css-reference-guide-margin\/","title":{"rendered":"CSS Reference Guide: margin<\/code>"},"content":{"rendered":"\n

The CSS margin<\/code> shorthand property is used to create space around an element outside of any defined borders. It defines the outermost portion of the box model.<\/p>\"CSS\n

Jump ahead:<\/em><\/h4>\n
    \n
  • Demo<\/a><\/em><\/li>\n
  • Syntax<\/a><\/em><\/li>\n
  • Values<\/a><\/em>\n
      \n
    • One value<\/a><\/em><\/li>\n
    • Two values<\/a><\/em><\/li>\n
    • Three values<\/a><\/em><\/li>\n
    • Four values<\/a><\/em><\/li>\n
    • Centering elements<\/a><\/em><\/li>\n
    • Negative values<\/a><\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

      The margin<\/code> property can be specified using lengths, percentages, and keywords such as auto<\/code>. It can also accept negative values.<\/p>\n

      \n

      Demo<\/h2>\n

      See the Pen
      \nCSS Margin Example<\/a> by Solomon Eseme (      @kaperskyguru<\/a>)
      \non       CodePen<\/a>.<\/p>\n