padding vs margin in css | What is the difference between Margin and Padding

CodingPorium 0 Comments

padding vs margin in css | What is the difference between Margin and Padding

padding vs margin in css | 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:

Javascript project ideas with complete source code 

<!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:

padding vs margin in css | What is the difference between Margin and Padding
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 confusions in 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 margin to make sure your understanding is much more 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>

The output is below:

padding vs margin in css | What is the difference between Margin and Padding

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 margin "moves" the object itself. Here's the comparison between both:

padding vs margin in css | What is the difference between Margin and Padding


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 the 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 a 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 it and you'll start to understand why you should use it as it makes your work easier.

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestion you have. Do 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!


Tags

Post a Comment

Post a Comment

Previous Post Next Post