If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
margin किसी element के चारो ओर से लिया गया space (खली जगह) होता है। margin property की help से आप किसी element के चारो ओर से space की manage कर सकते हैं।
simple margin example
margin control करने के लिए CSS 5 properties provide कराती है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin-top Example</title>
</head>
<body>
<p style="margin-top:15px;border: 5px solid greenyellow;">margin-top: 15px;</p>
</body>
</html>element पर border style इसलिए apply कर रहे हैं ताकि हमें पता चल सके , कि element कहाँ से और कितनी margin ले रहा है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin-right Example</title>
</head>
<body>
<p style="margin-right:15px;border: 5px solid greenyellow;">margin-right: 15px;</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin-bottom Example</title>
</head>
<body>
<p style="margin-bottom:15px;border: 5px solid greenyellow;">margin-bottom: 15px;</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin-left Example</title>
</head>
<body>
<p style="margin-left:15px;border: 5px solid greenyellow;">margin-left: 15px;</p>
</body>
</html>margin property की help से आप चारो तरफ (top , right , bottom , left) की margin एक साथ manage कर सकते हैं।
margin:20px 5px 2px 15px;
margin:40px 0 0 30px;
margin:2px 30px 0 20px;
margin:50px 50px 0 50px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS margin Example</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>
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
