CSS Layout

It is very important to understand CSS layout as it helps us to put a border around our content and manage its position and spacing with respect to the output screen. Each of our html element has the following CSS properties regarding layout:

• Border
• Padding
• Margin

Border

As the name suggests, it is the solid line just outside your element. To better understand these concepts, I have turned the background colour of the body of our previous example as black.
Now, we will add CSS to enable border:

Output:

Padding

In the above example, you can see that the texts are too close to the border, hence we need to add some space between the border and the content. These spaces are called padding. Padding are added to the content for which spacing is required. This will be clearer with the below example:

Example:

In the above example, we have added padding for all the content tags i.e. <h1>, <h2> and <p>. Here, we have just used padding-left, which adds space only at the left side of the content. Just adding padding will add spaces all around the content, which we didn’t want here.

Output:

Margin

Unlike padding, it adds spacing outside an element with respect to the UI screen. In the above example, if we need to add spacing in left side of the border, then it will be a margin. This will be clearer from the given example:

Example:

In the above code, we have added margin just outside the border, and the border is made for <div> tag here. We have added margin only to the left side and it is 30% of the total width of the screen. It will bring the content somewhere in the middle of the screen as shown below:

CSS Layout Overview

If we merge the margin, the border and the padding altogether for an element, then it will look something like below image: