CSS Margins and Padding

CSSWeb DevelopmentFront End Technology

For margins, use the CSS margins property. The margin property defines the space around an HTML element.

For padding, the padding property allows you to specify how much space should appear between the content of an element and its border.

Following is the code displaying margins and padding in CSS −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.outer-div {
   border: 2px solid purple;
   width: 300px;
   height: 200px;
}
.inner-div {
   border: 2px solid green;
   margin: 20px;
   padding-left: 20px;
}
</style>
</head>
<body>
<h1>Margin and padding example</h1>
<div class="outer-div">
<div class="inner-div">
Some sample text inside the inner div which will be padded by 20px all sides.
</div>
</div>
</body>
</html>

Output

The above code will produce the following output −

raja
Published on 07-May-2020 10:26:26
Advertisements