The very basic of CSS is to know the properties common to all elements. Margin and padding are 2 important properties that determine how an element is displayed on the screen. It is very important so know how these properties work on different elements under different circumstances. Margin, padding and border are all what surrounds an element. So what are the differences? Margin and padding are invisible where as border can have any color. Read each in details.
Margin is the invisible space that an element can have around it that spaces it from surrounding elements. It is the outermost among margin, border and padding. The margin area cannot contain anything. It acts more like an invisible insulator for the element. All four margins can be independently defined.
Border is the next property after margin in terms of position. Border helps to insulate an element visually. The border can have any color unlike margin and padding or colorless by not defining the color or by defining the color as transparent. All four margins can be independently defined.
Padding is the innermost among margin, border and padding properties. Padding defines how other elements are placed within an element. The background of the element starts after the border and is visible in the margin area.
If not specified the width of most elements are dynamic. It will be automatically adjusted to contain the contents. ‘div’ element occupy the entire width of the parent element. If the width is not defined for an element then the total horizontal space the element will occupy includes the margin, border, padding and width of the contents. That is, the width is automatically adjusted to accommodate the margin, border and width. If the width is defined then the element will grow out when margin and border are defined. So the total horizontal volume will be the sum of width, border and margin.
NB: Width property doesn’t effect some elements like span tag () and anchor tag ()