FriconiX
Free collection of beautiful vector icons for your web pages.

Lesson 2.7. Margin and padding

Structure of an HTML element

An HTML item is composed of 4 blocks nested one inside the other:

Here is a general outline of CSS margins:

General outline of CSS padding and margins

Content

Dimensions of HTML elements can be customized using the following properties:

Here is an example:

height: 150;
max-width: 400px;

The above example set a height of 200 pixels and a maximum width of 400 pixels:

Borders

The borders of HTML elements can be customized. There are many parameters for formatting borders, here are some of the most used:

Here is an example:

border-width: 6px;
border-style: solid;
border-radius: 20px;

The example above creates a continuous border of 6 pixels thickness with round corners of 20 pixels:

Padding

The size of the inner margins can be defined using the following properties:

The values can be:

Here is an example:

padding-top: 100px;
padding-right: 300px;
padding-bottom: 50px;
padding-left: 40px;

Margin

The size of the outer margins can be defined using the following properties:

The values can be:

Here is an example:

margin: 100px 300px 50px 40px;

Exercice

Let's considere the following HTML code:

<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>

For each title, remove the top and bottom margin before adding a left padding for each element:

Here is the expected result:

See also


Last update : 01/16/2020