CSS margin-top

The margin-top property in CSS is used to specify the top margin of an element. The margin is the space outside of the element's border, between the border and the surrounding content. You can set the margin to create space between elements, or to push an element away from the top of its containing element.

The margin-top property can be set using different units, such as pixels, ems, rems, or percentages. It can also accept negative values to move an element closer to the top of its containing element.

Let's take a look at some examples to better understand how the margin-top property works:

    <div class="box">
      This is a box with margin-top set to 20px.
    </div>
  

In the example above, we have a div element with a class of "box". We have set the margin-top property to 20 pixels, which creates space above the element.

    <p class="paragraph">
      This is a paragraph with margin-top set to 1em.
    </p>
  

This is a paragraph with margin-top set to 1em.

In this second example, we have a p element with a class of "paragraph". We have set the margin-top property to 1em, which is relative to the font-size of the element. This creates space above the paragraph.

Experiment with different values for the margin-top property to see how it affects the spacing of elements on your webpage. You can also combine it with other margin properties, such as margin-left, margin-right, and margin-bottom to control the spacing on all sides of an element.