Border, Padding and Margin properties are CSS properties that aid the web developer in arranging elements (html, text, graphics, links, etc…) on the web-page. Elements, when created, generate boxes. These boxes are essentially what wraps around the html elements and creates space in relation to other elements. In CSS these spaces follow a model called the “Box Model” as shown below:
Just to restate a very overlooked concept is that every element in web design is a rectangular box. What we are doing with these CSS properties is resizing each box. Now we will discuss what each property will do to the rectangles.
Margin
The margin is what clears the space around the element (outside the border). Margins are completely transparent and do not have background colors. (It’s just invisible space). Margins are used generally for spacing elements from one another. One can even collapse the space of an element’s margin and place elements side by side. Margin properties can be defined in the following way:
Or the shorthand method. Starting from the top and going clockwise.
As one can see, when these margin properties are applied to a block of text. The box of text moves relative to the sides of the box it is contained within.
Border
As we go down one layer. We get to the border. The border is simply a line that defines the area of an element. It is the border/edge/limit of the element. This is where the element technically starts and ends. Generally web developers can materialize the imaginary line of the border by calling up the css property “border”. The css border property allows one to specify the color, style, and thickness of an element’s border. Border properties can be defined in the following way:
Here is the shorthand method:
By applying the following directions, borders can be created in numerous fashions. Here is one example of what borders can look like.
Padding
Padding is the space between the content and border of an element. The padding property functions similarly to the margin property; with no padding the border and the element stay side by side, but with the addition of each pixel of padding, the distance between the border and the element increases. The padding property, unlike the margin, can be affected by the background color of an element. Padding properties can be defined in the following way:
Via shorthand:
As you can see, the size of the blue box that surrounds the text element increased relative to how much padding we gave it. This area is the padding that separates the content (the paragraph in this example) from the border.