Top margin

Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as the browser window or the edge of a container. Its syntax is “margin-top.” In HTML and CSS, a positive value increases the margin, while a negative value reduces it. 

By adjusting the top margin, you can change the vertical position of an element to align text, images, and other web content within a container. 

Margins can also visually separate elements, create a sense of hierarchy, and improve the site’s overall readability. For example, the “margin-top” property enables you to move a paragraph away from an element, such as an image or heading, creating a visual break and making it easier to read.

Here's what a CSS margin-top property looks like:

p {

  margin-top: 10px;


In this example, the container element houses the sample text, with 10 pixels added to it on the top margin. As a result, the paragraph <p> moves 10 pixels away from the container's top edge.

You can apply top and auto margins to any block-level HTML element, including headings, paragraphs, and divs. Visit Webflow University to learn how to use spacing effectively to make your web pages aesthetically pleasing and user-friendly.

A new way to learn and to build for the web

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Shoot, something didn't work. Try again later, bud.