Top margin

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.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more