Introduction

In HTML and CSS, there are a lot of variables that affects an element's positioning in a webpage. Depending on the goal of the developer and how the sections are set up, the manipulation of these variables will affect the quality of the website.

What is Content?

Content is anything the developer wants to display in the website. This can be an image, text, table and so on. As an example, think of brand new shoes inside its box. The shoes will be the content.

The content will be the blue area.

What is Border?

If the shoes are the contents of the box, the box itself will be the border. Keep in mind that the width of the box can be changed even if the content is the same.

The border will be the yellow area.

What is Padding?

Padding will be the cushion that is placed inside the box to protect the shoes. Sometimes it comes in bubble warp or pieces of crumpled paper. The important thing to remember is that it is the space inbetween your content and your border.

The padding will be the green area.

What is Margin?

Margin is the distance between your shoebox and other objects outside the box. In a webpage, this will translate to the space inbetween objects.

The margin will be the orange area.