What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, in this post we will learn the differences between margin and padding CSS properti...

For those who would like to know more about HTML and CSS, in this post we will learn the differences between margin and padding CSS properties that are used to add space between the HTML elements, thus preventing the elements from getting 'stuck' together.

Although both have similar functions, each work in a different way.
  1. Padding determines the inner margins, being used for changing the distance between the content of a given element and its border.
  2. Margin is the space outside of an element affecting how far the element is away from other elements.
For a better understanding of how the padding and margin work, take a look at the picture below:

padding and margin, css proprieties
Difference between margin and padding

Just as you have the option to define the borders for each side of your HTML elements (eg. borders for the sidebar), you can do the same with the margin and padding properties. All you need to to do is to change the top, right, bottom and left values​​.

The values that you can use include: pixels (px), centimeters (cm), millimeters (mm). em units (em), x-height (ex), inches (in), picas (pc) and point sizes (pt).

When using margin and padding, you need to add a value for each 4 corners of an element, as follows: top, right, bottom, left. Each value must refer to the each side of the HTML element. The first value is for the top, and they follow a clockwise direction, so the value would be close to the right, then bottom, and finally, left.

Example 1:
padding:5px 15px 5px 15px;
  • top padding is of 5px 
  • right padding is of 15px 
  • bottom padding is of 5px 
  • left padding is of 15px
margin: 10px 5px 10px 5px;
  • top margin is of 10px
  • right margin is of 5px
  • bottom margin is of 10px
  • left margin is of 5px
If you define a single value (instead of 4), the distance applies on the all sides, i.e. it will be applied on the 4 sides of the HTML element that you want to modify.

Example 2:
padding: 5px (top and bottom) 15px (left and right);
margin: 10px (top and bottom) 5px (left and right);

If it helps you visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame), while the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper.

It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want "space" after the border (outside the element = margin) or before the border (inside the element = padding).

COMMENTS

HawkHost Sale 25% Ending Soon

SaibABC's Contact Form:

Name

adsense,10,adsense optimization,4,adsense tips,5,Amp,3,backlinks,2,Beautiful,26,Beautifully,3,Beauty,15,beginner's guide,12,Blog Design,57,Blogger,22,blogger pages,4,blogger posts,11,blogging tips,3,Bolero Hot,13,click bombing,1,Comedies,10,Comedy,8,Comments,9,css,27,Cuisine,32,Cuisines,39,custom domain,2,Dab Neeg,6,DabNeeg,36,Facebook,4,Fashion,27,Fighting,12,firebug,1,font awesome,1,GoodTrick,58,google analytics,1,google plus,4,Grid Style,17,HealthLife,57,Hmong Health,11,Hmong Music,6,homepage,1,how to,54,Hunting,55,Image Effects,13,Information,17,instagram,2,Instrument,5,invalid clicks,1,javascript,10,jQuery,16,KabTxuj,28,Karaoke,19,Karaoke Hit,12,labels,2,Liste Style,6,make money online,8,menus,7,Movie Hot,37,Movies,18,Music Hot,41,Musical,100,Navigation,5,navigation menu,5,Other Clips,6,popular posts,5,posts,11,recent comments,1,recent posts,3,related posts,3,robots,1,Sad Songs,17,SEO,16,sitemap,1,slideshows,3,social media,8,social media plugins,4,statcounter,1,static pages,2,Technology,17,Template,12,Templates,7,threaded comments,3,tools,1,Travels,1,Video Fight,7,Video Hot,22,Video Hunt,30,Widgets,47,Xov Xwm,2,
ltr
item
SaibABC - News, HealthLife, Beauty, Tips: What is the difference between padding and margins?
What is the difference between padding and margins?
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjll3nRrMSVkDvs8F4XgyPP1OIcJXfzrnU0H4TKRSAXcDIX2y_JETrIHcsD9Kn6Y53KqnkJTgowT7GyaPxhXqlHNHIB_feiTph1uAXTir0qxUP5oqC8RZ__WKMc1T4SOlrOrUL7QFk0uLwH/s1600/difference-between-margin-padding-css-propriety-tutorial.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjll3nRrMSVkDvs8F4XgyPP1OIcJXfzrnU0H4TKRSAXcDIX2y_JETrIHcsD9Kn6Y53KqnkJTgowT7GyaPxhXqlHNHIB_feiTph1uAXTir0qxUP5oqC8RZ__WKMc1T4SOlrOrUL7QFk0uLwH/s72-c/difference-between-margin-padding-css-propriety-tutorial.png
SaibABC - News, HealthLife, Beauty, Tips
https://saibabc.blogspot.com/2021/03/what-is-difference-between-padding-and.html
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/2021/03/what-is-difference-between-padding-and.html
true
7959548849429202663
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy