What Is The Difference Between Margin And Padding In CSS
Hey friends, today I’ll on What is the difference between Margin and Padding. So First we learn what is Margin And Padding In CSS.
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.
5+ HTML CSS Projects With Source Code
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 the 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.
10+ Javascript Projects For Beginners With Source Code
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!
