Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

CSS Margins


CSS Margins:-


Code Family
The CSS margin propertie are used to providing space around an the out side the elements content, outside of any defined border of the element.
The margin is used to top, right, bottom, and left,
Margin - Individual Sides in elements-:



  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left

    • All the Margin properties for elements-:



  • length:-margin in px, pt, cm, etc
  • % - a margin in % of the width of the element


    • <!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Code family</h2>

<div>code family</div>

</body>
</html>

    Margin - Shorthand Property:-

    Shorthand Property of Margin

    Margin: 20px 30px 55px 100px;

    top Margin is 20px
    right Margin is 30px
    bottom Margin is 55px
    left Margin is 100px

    <!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Code family</h2>

<div>Code family</div>

<hr>

</body>
</html>

    Auto Margin:-



    <!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>code family Use of margin:auto</h2>
<p> Code family</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

    inherit Value:-



    <!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value in code family</h2>
<p>code in code family</p>

<div>
<p class="ex1">This Code family</p>
</div>

</body>
</html>


    More Topics