what's the difference between padding and margin? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 14

what's the difference between padding and margin?

it looks so tough 😞😔

11th Jul 2020, 1:19 PM
Munira Rakhmatova
Munira Rakhmatova - avatar
12 Answers
+ 13
Padding Padding is a CSS property that defines the space between an element content and its border (if it has a border). If an element has a border around it, padding will give space from that border to the element content which appears in that border. If an element does not have a border around it, then adding padding has no effect at all on that element, because there is no border to give space from. Margin Margin is a CSS property that defines the space of outside of an element to its next outside element. Margin affects elements that both have or do not have borders. If an element has a border, margin defines the space from this border to the next outer element. If an element does not have a border, then margin defines the space from the element content to the next outer element. Difference Between Padding and Margin So the difference between margin and padding is that while padding deals with the inner space, margin deals with the outer space to the next outer element.
11th Jul 2020, 1:30 PM
Joobin Jacob ◆ ܝܘܼܒܝܼܢ ܝܹܩܲܒ ◆‎
+ 12
Padding viewni ichidagi contentni siqadi, margin viewni otasiga nisbatan o'zini siqadi. Androidda ishlayman shuning android bo'yicha aytdim
11th Jul 2020, 1:26 PM
Shohnurjon Zokirov
Shohnurjon Zokirov - avatar
+ 9
Let's keep it simple When you a create a box , it has border so, -->Margin is from border of box to outside of browser width -->Padding is from border of box to inside .. https://www.sololearn.com/learn/CSS/1100/?ref=app Check this ... This wld help you
11th Jul 2020, 1:25 PM
Nikhil Maroju
Nikhil Maroju - avatar
+ 7
yellow represents element black is the border blue is the margin red is the padding https://code.sololearn.com/Wr4uQ3E94uWa/?ref=app
11th Jul 2020, 1:22 PM
ChaoticDawg
ChaoticDawg - avatar
+ 7
oh, ok thank you all. To my mind, i got it 😊😊😊
15th Jul 2020, 7:11 AM
Munira Rakhmatova
Munira Rakhmatova - avatar
+ 5
You can learn it on CSS tutorial in sololearn. Padding: the space between Content and Border Margin : the space after the border of the content to the ...
11th Jul 2020, 1:22 PM
Sâñtôsh
Sâñtôsh - avatar
11th Jul 2020, 1:51 PM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
+ 5
Margin helps create space outside the container (div, etc) while padding creates the space inside the container. Nilesh Munira
13th Jul 2020, 2:36 AM
Marvellous Osewe Christopher
Marvellous Osewe Christopher - avatar
+ 5
Hello, Margin is applied to the outside of your element hence affecting how far your element is away from other elements. Padding is applied to the inside of your element hence affecting how far your element's content is away from the border. Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5px padding, your div will actually be 105x105px Margins: Margins in CSS make up the vertical and horizontal areas between elements. If elements have no margins around them, they will bump right up against each other. Padding: Padding of an element is the horizontal and vertical space that’s set around the content area of the targeted element. So padding is on the inside of a box, not the outside Padding means in the element and margin means related to another element. I hope this will help to you
16th Jul 2020, 5:05 AM
Ishan Shah
Ishan Shah - avatar
+ 3
Hello, padding is used for creating space for contents in the box you have created while margin is used for space outside the box.
13th Jul 2020, 6:21 AM
Olukunle david
+ 3
padding is the space between the content and the border, whereas margin is the space outside the border. 
13th Jul 2020, 7:29 AM
Prince Kumar Tiwari
Prince Kumar Tiwari - avatar
+ 2
Yes! Actually these are the topics of css box model. let make it easier. In css every content from para to shape and semantics in itself have border but it is always hidden till we not specify its border. so first make it clear every content have its own place with hidden border. Margin : Now take a scenario of two css content positioned side by side , here we want space between two , whatever space there are outside of content is called margin. It specify space for outside of border to next content. Padding : Same like that whatever space we want Between content to border is called padding. k it specify space from its content to its border. Note : Attached image can clear your doubts.
26th Jul 2020, 2:27 PM
Kashyap Patel
Kashyap Patel - avatar