CSS Margins and Padding

CSS Web Development Front 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>