CSS Layout

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:

CSS Border

Output:

CSS 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:

CSS Padding

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:

CSS Padding 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:

CSS Margin

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 Margin Output

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:

CSS Layout

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.