Write a HTML and CSS Program illustrating Margins and Padding

 Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HTML and CSS</title>

</head>

<body>

<div style="background-color: #00666f;border: 5px solid #ff29ff;padding: 0px;">

<div style="background-color: yellow;border: 2px solid powderblue;margin-top: 30px;margin-right: 30px;margin-bottom: 30px;margin-left: 30px;">

margin-top:30px;<br>

margin-right:30px;<br>

margin-bottom:30px;<br>

margin-left:30px;<br>

</div>

</div>

<hr>

<div style="background-color: #00666f;border: 5px solid #ff29ff;padding: 0px;">

<div style="background-color: yellow;border: 2px solid powderblue;padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;">

padding-top:30px;<br>

padding-right:30px;<br>

padding-bottom:30px;<br>

padding-left:30px;<br>

</div>

</div>

</body>

</html>

Output: