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.
