CSS Padding & Margin

In our earlier lessons, we showed you how to use CSS to apply padding and margins to individual HTML elements.

Now, it is time to learn how to apply these properties to the whole body of a web page.

You must have noticed that different web browsers, by default, apply different amounts of padding and margins to a web page.

These settings, however, are easy to over-ride if you set your values:

Body {
Margin: 0;
Padding: 0;
Border: none;
}

Doing so clears all the default styling from your web pages, but you are allowed to change the values however you want.

Remember, it is not necessary to set the properties of our web page like this.

However, we believe that it is an excellent habit to adopt.

Different web browsers will display our HTML according to their default values, making it look slightly different if we don’t set our properties.

In most cases, our page layout does not get noticeably different due to these changes, but sometimes, they shift elements entirely out of their places.