Here is an example class that demonstrates a basic format of the componets. In this example I have used pixels (px) as the units.
The 4 values assigned to the componets represent the top, right, bottom and left sides of the element in that order
The most basic of these is the Content. This is what actually exists inside of the element whether that be a heading, paragraph, image, etc. Naturally the size of the content is going to play a big part in the size of the overall element.
Up next is Padding. Padding is the space between the element's contents and its border. The best analogy I can think of to describe padding, would be that it’s the size of the contents house. The higher the padding value the larger that house becomes.
This then brings us to the Border. The Border is the most self explanatory component in my opinion. It describes the thickness of the border that surrounds the content. Going back to our house analogy this could be how thick the fence around your house is.
And finally we come to Margin. Margin describes the distance between this element and the next. For our house analogy, that would be the distance to your neighbors. Sharing a fence line could represent a margin of “0”. While you and your neighbors across the road are separated by some “n” margin (the width of the road).