CSS margin
➔ Margins are used to create space around elements outside the border.
Click on the "Try it Now" button to see how it works.
Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS margin Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
.container{
background-color: #d5d5d5;
}
section {
background-color: blue;
margin: 10px;
display: inline-block;
}
div {
background-color: green;
margin: 20px;
display: inline-block;
}
img {
margin: 30px;
display:block;
}
</style>
</head>
<body>
<h3>CSS margin Example</h3>
<p>Margin is the space outside an element.</p>
<p>Note: Here the blue element uses margin 10px and the green element uses margin 20px and img element uses margin 30px.</p>
<div class="container">
<section>
<div>
<img src="resources/images/fruits-apple.png" width="50">
</div>
<div>
<img src="resources/images/veg-broccoli.png" width="50">
</div>
</section>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.