The easiest way to distinguish one to another is taking a look at the CSS Box Model. The CSS Box Model is simply just a box that wraps around every HTML element. It consists of: margins, borders, paddings, and the actual content. The most inner part is called the content, which is like a textbox with all the writing/images.
PADDING
The padding is a transparent box that surrounds the contents of an element on all four sides. The padding lies between the content of an element and the border.
BORDER
The border wraps around the padding and is the lines that lies between the padding and the margin. A border consists of 3 main individual style components called border-width, border-style, and border-color.
Border-width specifies the width of the border and we can change the thickness of the border.
Border-style specifies what the border lines are made up of. Some common border lines can be a solid line, dotted lines or none.
Border-color specifies the color of the border lines.
For example, in the image below I have given the border-width a width of 15px, a border-style of a solid line, and a border-color of blue.
MARGIN
The margin is the transparent box outline that surrounds the border lines. It determines the distance between the box model to other HTML elements. For example, in the image below there are some white space surrounding the blue border.
