An HTML item is composed of 4 blocks nested one inside the other:
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 heightmax-width
defines the maximum widthmin-height
defines the minimum heightmin-width
defines the minimum widthHere 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:
border-color
defines the color of the borderborder-width
defines the thickness of the borderborder-style
defines the style of the border (hidden, continuous, dotted ...)border-radius
defines the radius of the corner roundingHere 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 marginpadding-right
: size of the inner margin on the rightpadding-bottom
: size of the lower inner marginpadding-left
: size of the inner margin on the leftpadding
: defines the four inner margins in the order top, right, bottom then leftThe values can be:
auto
the browser automaticaly adjusts the marginsinherit
the margins are inherited from the parent elementHere 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 marginmargin-right
: size of the outer margin on the rightmargin-bottom
: size of the lower outer marginmargin-left
: size of the outer margin on the leftmargin
defines the four outer margins in the order top, right, bottom then leftThe values can be:
auto
the browser automaticaly adjusts the marginsinherit
the margins are inherited from the parent elementHere 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:
h1
: 0 pixelh2
: 20 pixelsh3
: 40 pixelsh4
: 60 pixelsh5
: 80 pixelsh6
: 100 pixelsHere is the expected result: