129 total views

CSS Margin का उपयोग Elements की चारो ओर Space create करने के लिए किया जाता है।

What is CSS Margin

अगर Elements के बीच मे margin रहता है तो users को पढ़ने मे या देखने मे कोई परेशानी नहीं रहती है और वे पढ्ना या देखना पसंद करते है। आप Elements की चारो और individually margin set कर सकते है मतलब की Elements की चारो ओर जैसे की Top, Bottom, Left या Right side Individually space create कर सकते है।

Different Types of margin Properties – CSS Margins

Elements की चारो और individually Margin set करने के लिये इस प्रकार की CSS Property का इस्तेमाल होता है।

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

सभी margin property को निम्नलिखित Value provide कर सकते है।

  • auto – Browser के द्वारा margin provide किया जाता है।
  • length – margin को measurement unit जैसे की px, pt, cm etc. मे दिया जाता है।
  • percentage – margin को percentage (%) मे दिया जाता है।
  • inherit – parent element की value को inherit (set) किया जाता है।

CSS Margin-top Property

इस property के द्रारा Element के लिये top से margin set किया जाता है मतलब की top से space create की जाती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin-top: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-top Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
-----------------------------------------------------------------------------
CSS Margin-right Property
इस property के द्रारा Element के लिये right से margin set किया जाता है मतलब की right से space create की जाती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin-right: 150px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-right Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
---------------------------------------------------------------------------
CSS margin-bottom Property
इस property के द्रारा Element के लिये bottom से margin set किया जाता है मतलब की bottom से space create की जाती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin-bottom: 70px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-bottom Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
-----------------------------------------------------------------------------------
CSS Margin-left Property
इस property के द्रारा Element के लिये bottom से margin set किया जाता है मतलब की bottom से space create की जाती है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin-left: 70px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-left Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
---------------------------------------------------------------------------
Margin – Shorthand Property
Shorthand property की मदद से सभी margin property को एक ही line मे declare किया जाता है।

उदाहरण

p {
margin: 5px 10px 15px 20px;
}
इस Example मे margin का क्रम इस प्रकार से रहता है।

Margin-top
Margin-right
Margin-bottom
Margin-left
उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-Shorthand Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
---------------------------------------------------------------------------------
इस उदाहरण मे चारो property को एक ही line मे declare किया जाता है।

यहा

Top Margin 25px होगी।
Right Margin 50px होगी।
Bottom Margin 75px होगी।
Left Margin 100px होगी।
जब margin मे तीन value को define किया जाता है जैसे की

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-Shorthand Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
----------------------------------------------------------------------------------------
इस उदाहरण मे

Top Margin 25px होगी।
Left and Right Margin 50px होगी।
Bottom Margin 75px होगी।
जब margin मे दो value को define किया जाता है जैसे की

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-Shorthand Property</h3>
<p> What is CSS Margin </p>
</body>
</html>
------------------------------------------------------------------------------------
इस उदाहरण मे 

Top and Bottom Margin 25px होगी।
Left and Right Margin 50px होगी।
जब margin मे एक value को define किया जाता है जैसे की

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-Shorthand Property</h3>
<p> This is margin-Shorthand property</p>
</body>
</html>

-------------------------------------------------------------------------------
auto Value
margin की auto value Element को उसके container मे horizontally centered कर देता है।

यहा element को specified width दी जाती है और बाकी space को left और right margin को equally बाट दिया जाता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h3 {
  border: 1px solid black;
  width:300px;
  margin: auto;
  background-color: lightblue;
}
</style>
</head>
<body>
<h3>Margin-auto value</h3>
<p> This is Margin-auto value</p>
</body>
</html>
-----------------------------------------------------------------------------
inherit Value
इस value की मदद से parent element की value को inherit (set) किया जाता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 80px;
}
p.ex {
  margin-left: inherit;
}
</style>
</head>
<body>
<h3>Margin-inherit value</h3>
<div>
<p class="ex"> This is Margin-inherit value</p>
</div>
</body>
</html>
-----------------------------------------------------------------------------

By admin

Leave a Reply

Your email address will not be published.