Create a margin and padding space in a Box by using CSS.

navigation bar: This tag is used to start making a form

label: This tag is used to define a label for form element

input: This tag is used to get input data from the form

button: This tag is used to create a button which can be click to perform some action

select: This tag is used to create a drop-down selectable list

textarea: This tag is used to create a bigger text input field to take input from users

fieldset: This tag is used to group simillar type of fields

legend: This tag is used to caption the fieldset element

datalist: It is used to specify pre-defined list options for input control

output: This tag is used to display the output of the performed operation

option: This tag is used to define options in the dropdown list.

Following is the hierarchy required for the tags:

form is created first inside the body to start making the form.
rest all options can be defined anywhere inside the form element except
- option needs to be present inside a tag where options are available

Code

                    
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Practical 9</title>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css"> -->
        <style>
            body {
                margin: 0;
                height: 100vh;
                display: grid;
                place-items: center;
            }

            .div1 {
                position: absolute;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color: red;
                font-size: 100px;
                background-color: aqua;
                padding:auto;
                text-align: center;   
            }
            .padding {
                padding: 10px;
                background-color: white;
            }
            
            .margin{
                background-color: white;
                margin: 30px;
            }
            img {
                max-width: 100%;
                height: auto;
            }
        </style>
    </head>

    <body>
        <img src="https://images.wallpaperscraft.com/image/single/gray_light_background_dots_perforation_72423_1600x900.jpg">
        <div class="div1">
            <div class="margin">Margin: 10px</div>
            <div class="padding">Padding: 10px</div>
        </div>
    </body>

</html>

Output

Practical 9

Margin: 10px

Padding: 10px