CSS Margins

CSS margins are used to leave desired spaces around HTML elements.
    Types of margins in CSS:
  • Margin-top
  • Margin-bottom
  • Margin-left
  • Margin-right

Margins in CSS

  • Margin top leaves space from top of screen.
    Using margin top we can also define top margin of any element.
  • Mragin bottom is used to leave space from bottom for displaying HTML elements in browsers.
    Margin bottom can slo be used to display lower margin of HTML documents in web page.
  • Margin left leaves space from left hand side in web pages.
    This element also makes left margin of HTML web pages.
  • Margin right forms the right elements of HTML web pages.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
margin-top:100px;
margin-bottom:100px;
margin-right:150px;
margin-left:80px;
}
</style>
<title>
HTML MARGINS
</title>
</head>
<body>
<div>THIS IS DIV ELEMENT.</div>
</body>
</html>

Output:

In this example top margin of div element is 100px.Space left from right side is 150px and space left from left side is 80px.
THIS IS DIV ELEMENT.
This element may not be well displayed in small screens.