The light blue outline is the div#wrapper that hold this sample content. The box is the dotted outline and inside the box is a table that is coloured yellow. Both the table and box are the same dimensions of width:400px and height:100px

* Always take into account the thickness of the borders in regards to the dimensions of elements. If a box has a dimension of 200px width and 100px height, when you add a 1px border to it, the box would then have a dimension of 202px width and 102px height because of the 1px border around it. To make the examples easier to undersand, we have not taken the border thickness into account.

Box has ZERO Padding and Margin. Box is flush against the div#wrapper and the table is flush against the box

Box has Padding 20px - which has moved the table inside the box 20px away from the boundary of the box

Box has Margin 20px - which has moved the table inside the box 20px away from the boundary of the box

Compensating for Padding

Whenever you apply padding or margins to your elements, you have to compensate for any changes that occurs with the elements dimensions. For example, when you increase the padding of the box, it will also increase the size of the box to compensate for the padding. If you want to maintain the original box width of 400px, that means you have to subtract the padding it has added to the box dimensions. Therefore the left and right padding that affect the box width would total to 40px so then you must change the width of the box to 360px.

Box has Padding 20px - The box width has been reduced by 40px to compensate for the padding.

The issue now is that when you decrease the width of the box, the box now becomes too small for the table. You must also decrease the width of the table to 360px so that it also compensates for the padding and the new dimensions of the box.

Box has Padding 20px - The table width has also been reduced by 40px to compensate for the padding and the reduction of the box width.

Compensating for Margins

You have to apply similar methods when compensating for margins. If you do not want the box, table and margin to take up more than the original width of 400px in your web page because that is the space you have assigned. You have to reduce the width of the box and table by 40px to compensate for the 20px margin added to the left and right side.

Box has Margin 20px - The width of the box and table has been reduced by 40px to compensate for the margins. The box, table and margin now take up the original width of 400px.