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
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:
Margin in css
- margin
- margin-bottom
- margin-top
- margin-left
- margin-right
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:
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.
Check it more
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!
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!
Post a Comment