Lesson 2.7. Margin and padding

Structure of an HTML element

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

content : this is the content of the item (the main block)
border : this is the element border (often invisible)
padding : this is the inner margin (between the content and the border)
margin : this is the outter margin, the space between this element and its neighbors

Here is a general outline of CSS margins:

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

height defines the height in pixel (px), point (pt), centimeter (cm), percentage (%) ...
width defines the width in pixel (px), point (pt), centimeter (cm), percentage (%) ...
max-height defines the maximum height
max-width defines the maximum width
min-height defines the minimum height
min-width defines the minimum width

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:

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:

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

padding-top: size of the upper inner margin
padding-right: size of the inner margin on the right
padding-bottom: size of the lower inner margin
padding-left: size of the inner margin on the left
padding: defines the four inner margins in the order top, right, bottom then left

The values can be:

Here is an example:

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

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

margin-top: size of the top outer margin
margin-right: size of the outer margin on the right
margin-bottom: size of the lower outer margin
margin-left: size of the outer margin on the left
margin defines the four outer margins in the order top, right, bottom then left

The values can be:

Here is an example:

margin: 100px 300px 50px 40px;

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: