CSS margin in Hindi

किसी भी elements के चारो side से लिए गए space को margin कहते है। margin property की मदद से आप किसी भी elements का margin को manage किया जा सकता है।

CSS में margin को मैनेज करने के लिए 5 property है जो इस प्रकार है :

margin-top : अगर Top से margin लेना होतो
margin-right : अगर Right side से margin लेना होतो।
margin-bottom : अगर Bottom से margin लेना होतो।
margin-left : अगर Left side से margin लेना होतो।
margin : अगर चारो तरफ से margin apply लेना होतो।

Table of Contents

CSS margin-top

अगर किसी भी element के top side में margin देना हो तो margin-top property का use किया जाता है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS margin-top Example by Technalay </title>
  </head>
  <body>
    <p style="margin-top:15px;border: 5px solid blue;"> margin-top: 15px;</p>
  </body>
</html>

CSS margin-bottom

अगर किसी भी element के bottom side में margin देना हो तो margin-bottom property का use किया जाता है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS margin-bottom Example by Technalay </title>
  </head>
  <body>
     <p style="margin-bottom:15px;border: 5px solid blue;">margin-bottom: 15px;</p>
  </body>
</html>

CSS margin-right

अगर किसी भी element के right side में margin देना हो तो margin-right property का use किया जाता है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS margin-right Example by Technalay </title>
  </head>
  <body>
    <p style="margin-right:15px;border: 5px solid green;">margin-right: 15px;</p>
  </body>
</html>

CSS margin-left

अगर किसी भी element के left side में margin देना हो तो margin-left property का use किया जाता है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS margin-right Example by Technalay </title>
  </head>
  <body>
    <p style="margin-left:15px;border: 5px solid green;">margin-left: 15px;</p>
  </body>
</html>

CSS margin

इस property के मदद से आप एक साथ चारो side में margin दे सकते है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS margin-right Example by Technalay</title>
  </head>
  <body>
    <p style="margin:20px 5px 2px 15px; border: 5px solid greenyellow;">margin:20px 5px 2px 15px;</p>
    <p style="margin:40px 0 0 30px; border: 5px solid red;">margin:40px 0 0 30px;</p>
    <p style="margin:2px 30px 0 20px; border: 5px solid green;">margin:2px 30px 0 20px;</p>
  	<p style="margin:50px 50px 0 50px; border: 5px solid blue;">margin:50px 50px 0 50px;</p>
    </body>
</html>

CSS margin-top Example by Technalay

margin-top: 15px;

CSS margin-bottom Example by Technalay

margin-bottom: 15px;

CSS margin-right Example by Technalay

margin-right: 15px;

CSS margin-right Example by Technalay

margin-left: 15px;

Reladet Querry