Differences Between Margins and Paddings In CSS

Posted By Bajarangi soft , Posted On 10-10-2020

CSS paddings are used to create space around the element, inside any defined border. We can set different paddings for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties,CSS margins are used to create space around the element. We can set the different size of margins for individual sides(top, right, bottom, left).

Difference Between margin and Padding
Margin is used to create space around element and padding is used to create space around element inside the border Margin and padding target all the 4 sides of the element. Margin and padding will work without the border property also. The difference will be more clear with the following example.
EXAMPLE:

<html>
<head>
    <style>
        h2
        {
            margin:50px;
            border:70px solid #e51f1f;
            padding:80px;
        }
    </style>
</head>
<body>
<h1>
   Bajarangi Soft
</h1>
<h2>
    Margin properties
</h2>
</body>
</html>