CSS Margin.

Another series of properties related to the outline of an HTML element are:

margin
margin-top
margin-right
margin-bottom
margin-left

The margin is after the border.

The margin separates an HTML element from another HTML element within the page.

Let's see an example, the HTML page shows two paragraphs with zero pixels of margin:

<!DOCTYPE html>
    <html>

    <head>
        <title>Problem</title>
        <meta charset="UTF-8">
        <link rel="StyleSheet" href="styles.css" type="text/css">
    </head>

    <body>
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </body>

    </html>

The style sheet:

p {
  background-color:#ffffaa;
  margin:0px;
  border-width:1px;
  border-style:solid;
  border-color:#ff0000;
}

photo

Keep in mind that when two HTML elements, one below the other have margins specified, the final result of the bottom margin of one and the top of the other are not added.

For example, if an element has a bottom margin of 10px and the element below it has a margin of 20px, then the total margin between these two elements is 20px (it is the greater of the two margins and not 30px, which is the sum)

Try modifying the value for the margin property and see the result on the page.

The final box model can be summarized with this image:

It is common that when the margin is zero the unit of measure is not indicated:

margin:0;

Robort Gabriel

Lagos, Nigeria

Skills