CSS Design

Margin, border, and padding are very important topics to understand, given their importance to how elements are rendered, displayed, and positioned.

Crucial to understanding margin, border, and padding is the idea that every element on a web page sits in an imaginary "box". The amount of space between the content in that box and the border of that box is called padding. After the padding, sits the border. The border can be made as thick as necessary. Finally, between the border and any other element sits the margin. The margin creates space between the element with the margin and other elements around it. If two margins overlap, then the largest margin applies. It is important to understand that when we set the width of an element, we are actually setting the width of the content of that element. The amount of padding, border, and margin add to the actual width of the element.