Examine the CSS source code for details on using padding and border properties.
Padding is the space inside the box model, specifically: the distance between the edges of the box and the content within the box.
Adjust padding, each side different than the next side
Adjust all padding sides at once
Yes, inline tags can have padding too, though it will behave poorly on the vertical axis. Use diplay:block; to more effectively work with inline padding
Borders define the outside edges of the box model.
Adjust border, each side different than the next side
Adjust all border sides at once
Yes, Inline tags can have borders too, but again the vertical axis will not usually behave well. Use diplay:block; to more effectively work with inline borders
In CSS, padding and border widths are added to box model dimensions. Each of the boxes below have been assigned a 100px fixed width.
100px width + no padding + no border = 100px wide
100px width + no padding + 10px border-left + 10px border-right = 120px wide
100px width + 100px padding-left + no border = 200px wide
100px width + 100px padding-left + 10px border-left + 10px border-right = 220px wide