What Is The Difference Between Margin And Padding

What Is The Difference Between Margin And Padding

Hey friends, today I’ll on What is the difference between Margin and Padding. Before we dive in, i’ll introduce myself. I’m CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel at here or by searching for CodingPorium on YouTube for more!

Padding in css

Now, what is padding. Padding is generally used to create or  enable some spacing surrounding your HTML/CSS element inside a defined border. For example, we use padding to set some text to have spacing from its left side. There are 5 properties for padding. These include:

padding
padding-bottom
padding-top
padding-left
padding-right

The classical padding property can also be used as a shorthand property for the balance 4 properties. Now, let’s see an example usage of padding. First, add the following code in your HTML file:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 5px solid dodgerblue;
}
</style>
</head>
<body>

.
<div><h2>This element has a padding of 70px.</h2></div>

</body>
</html>

The output for this code segment would be like below:

You can also configure the spacing surrounding the text by using the other padding properties or by embedding it in the padding shorthand code.

Next, let’s see what is margin.

Margin in css

Margin is similar to padding which can cause confusion among developers and coders. However, the only difference, is that it’s used to create spacing outside any defined borders. In other words, we use margin to “move” your HTML object itself.
Just like padding, the properties of margin are as below:
margin
margin-bottom
margin-top
margin-left
margin-right
The shorthand property can be embedded in the basic margin property just like padding. Now, here’s the code segment and image of the margin to make sure your understanding is much better.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 5px solid dodgerblue;
}
</style>
</head>
<body>

.
<div><h2>This element has a margin of 70px.</h2></div>

</body>
</html>

padding vs margin in css  | The Verdict

Now as a quick recap, here’s the difference between both of these CSS properties. Padding makes space around the object and the margin “moves” the object itself. Here’s the comparison between both:

I hope this shows very well the difference of both of these CSS properties. Before I end this post, let’s see why you should use CSS Properties.

Why use these properties?

The answer is honestly pretty simple. To position elements according to your needs. For example, you may use padding for an HTML button to create spacing surrounding the text inside the button which will also enlarge the button size. These properties are very easy to use if you practice and you’ll start to understand why you should use it as it makes your work easier.

Thank You!

Do contact me at Here or comment down below any doubts or suggestions you have. To subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!

Check out more…..

1. instagram logo html code

2. add to cart button

3. hamburger menu javascript

Share on:

Leave a Comment