Any Simple Trick to Remember the Difference Between Margin and Padding?-CodePudding

As the title states, does anyone have a really simple trick that they can remember on the fly to differentiate between padding and margins in CSS? I know that padding creates space within while a margin creates space around. The truthiest maxim about this is probably just that "The knowledge of the difference comes with experience," but does anyone have a mnemonic or a simple way they remember that they want to share?

CodePudding user response：

Best example of the difference of padding and margin with tipical border-bottom: You use padding to add some distance INSIDE the container of the text. You use margin to add DISTANCE from container to container. The border of the container is separated 20px from the text by padding, and the border of this (and each) container push next one 20px below with MARGIN

Like this:

* {box-sizing:border-box;}
div {
padding-bottom:20px;
margin-bottom:20px;
border-bottom:1px solid black;

}

<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>

CodePudding user response：

Does this help?

Also don't forget to check css "box-model".