University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
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.

Relevant courses

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Public site

→
A Webflow site that is publicly visible in your public profile and in Made in Webflow search results.

Object-oriented programming (OOP)

→
Object-oriented programming (OOP) is a programming approach that organizes code into self-contained units of data, functions, and behavior.

Localization

→
Localization (l10n) involves adapting digital content and applications to meet a specific region or culture’s language and conventions.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Resource Description Framework (RDF)

→
The Resource Description Framework (RDF) is a standardized framework developed by the World Wide Web Consortium (W3C) that facilitates automated data exchange between web systems and applications.

Shim

→
A shim is a code snippet enabling modern web features to function within older programming or browsing environments.

Meta description

→
An HTML attribute you can use to give a short description of the contents of a webpage. Search engines often&nbsp;display this in results pages (SERPs).

API

→
APIs, or Application Programming Interfaces, are common code protocols that let apps safely exchange data with other apps, software, and hardware.

Media section

→
A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

Algorithm

→
An algorithm is a set of rules or steps that help solve problems or carry out specific tasks.

Common targets

→
All elements on the page targeted by the same selector.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Literal

→
In JavaScript, literals are fixed values written directly into the code.

Text block

→
A typography element that is used when no other element is specifically suitable.

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.

Container

→
An element that contains content.

Buffer

→
A buffer is a temporary storage area that holds data while transferring it between different components or systems.

Custom font

→
A custom font is any non-system-default typeface you manually upload to your website.

Style Manager

→
The third tab in the right-side panel where you can rename element classes, preview your class and tag styles, search for classes and tags, and delete any classes that aren’t in use.

Delete element

→
To remove an element and&nbsp;its content from your website.

Hotlink

→
A hotlink — also known as a remote or inline link — is a hyperlink that directs to a resource, such as an image or a file, without the owner’s explicit permission.

Bounding box

→
A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process.

Editor toolbar

→
The toolbar that appears at the bottom of the Editor. From here, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

Parameter

→
A parameter is a programming variable or value that transfers data between functions.

Backlink

→
A backlink, also referred to as an inbound link, is a hyperlink from one website to another website.

Basic section

→
A section of the Add panel that contains the elements that act as a website's fundamental building blocks (e.g., div block, list, button, etc.).

Username

→
The ID used to log into your Webflow account.

Element edges

→
The color-coded borders of elements you'll see in the Webflow Designer.

CMS section

→
A section in the Add panel that contains elements associated with the CMS.

Slider

→
A slider is an interactive design element for scrolling through images, videos, and other multimedia content.

Unpublished change

→
A change that has been made in the Webflow Editor but will not appear on the live website until it’s published. You can track any unpublished changes on the bottom right of the Editor toolbar.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Display: grid

→
The display: grid CSS property defines a website element (such as a button or header) as a grid container.

Webflow CMS

→
Webflow's content management system (CMS) is where dynamic content (Collections and their Collection items) is stored and maintained so you can reference it throughout your site. A CMS lets you input data in one location, then use Collection template pages or Collection lists to display that content without having to update the content displays one at a time.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

Workspace

→
A space to hold and access sites, members, settings, and integrations. All users start with a Workspace that can become collaborative when and as needed.

Select field

→
A form element that allows you to make a selection in a dropdown list.

Alt text

→
Alt text, short for alternative text, refers to text that describes online images.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

Subdomain

→
The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

Collection

→
A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

Bottom margin

→
The spacing between the bottom border of an element and the element(s) below it.

States dropdown menu

→
The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Dynamic content

→
Content you create once, then publish in many different places across your website. As you update this content in the CMS, it automatically updates wherever it exists on your site, making it convenient to create and manage larger websites.

BigInt

→
BigInt, which stands for “big integer,” is a JavaScript data type. JavaScript uses data types to decide how to treat a piece of data.

Zapier

→
A web app that helps you connect multiple third-party services together based on triggers and actions.

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Abstraction

→
In object-oriented programming (OOP), abstraction conceals irrelevant details so they don’t interfere with the task at hand.

Inline style

→
Inline style applies CSS to an individual HTML element using the "style" attribute within the HTML tag.

Deprecated

→
Deprecated HTML tags are old tags replaced by updated alternatives in modern web design and development.

Mobile (landscape) breakpoint

→
A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

Collection field

→
An individual field within a Collection. You'll select which fields to display in dynamic Collection lists and Collection pages.

Drafted pages

→
You can exclude pages from being published to your site by setting them as drafts. These can be unfinished pages, internal pages such as style guides, archived pages saved for backup, etc. Learn more about drafted pages.

DNS records

→
DNS records store important information about domains and hostnames. They function like maps, directing DNS queries to the desired endpoint.

Webflow Support

→
The place to go when you need help using Webflow.

Date/Time field

→
A field available in CMS Collections. This field lets you display a date and time in a Collection and/or Collection item.

SCA and PSD2 Regulations

→
Mid-September 2019, new European requirements for authenticating online payments were introduced in Europe as part of the second Payment Services Directive (PSD2). The Strong Customer Authentication (SCA) requirements apply to businesses in the European Economic Area (EEA) that accept online card payments from cardholders whose banks are also located in the EEA.Webflow Ecommerce payments are PSD2 and SCA compliant (i.e., support 3D Secure payments) for European customers.If you’re a merchant in the European Economic Area (EEA), all you need to do to ensure that your Webflow Ecommerce store is PSD2 and SCA compliant for your European customers is to republish your store if it wasn’t published on or after September 11, 2019. Read more about how to make your ecommerce store compliant in our Payment gateway article.

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.

Total asset size

→
The total weight of your site's HTML, CSS, JS, and images.

Canvas

→
The &lt;canvas&gt; tag in HTML5 creates a container for dynamic graphics and image rendering on a webpage.

Optimization

→
Optimization is a systematic approach to improve a website's appearance, functionality, and visual appeal to enhance the user experience, improve search engine rankings, and achieve business objectives.

URL

→
A Uniform Resource Locator (URL) is a standardized web address format that allows users to identify and access an online resource.

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Head code

→
Custom code that's added just before the closing &lt;/head&gt; tag in your site's HTML file. Learn more about custom code in head and body tags.

Display property

→
Display properties operate like instructions that tell a browser how to display the different parts of a webpage. You can customize an element’s appearance and layout by changing its display property.

Constant

→
In coding, a constant is a fixed value that can’t change, no matter where it appears or what the program uses it for.

Typography

→
A section in the Add panel that houses typography elements such as headings and paragraphs.

Email template

→
Email templates — or pre-designed HTML layouts — ensure consistent branding and visual aesthetic in marketing campaigns.

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

Component Module

→
A section in the Add Panel that houses pre-built Webflow elements such as sliders, tabs, and lightboxes.

Document object model (DOM)

→
The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

Total Site Pages

→
The amount of pages your site currently has.

Help text

→
Help text is a user interface design element that provides additional information or guidance to users to clarify which content should go in a given Collection field.

AJAX

→
Asynchronous JavaScript and XML (AJAX) is a web development approach that combines technologies to allow web content to update without reloading.

Homepage

→
The page people see when they visit your site's root domain. Read more about the homepage.

Form block

→
Form blocks allow you to add form elements to a website, including appointment booking, surveys, applications, polls, and contact forms.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Form button

→
A form element that lets website visitors&nbsp;submit data to your form handler.

Tutorials

→
The fastest way to learn how to use Webflow.

Flex-basis

→
Flex-basis is a CSS property used in flexboxes that sets the initial size of a flex item before it grows or shrinks.

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Search Engine Optimization (SEO)

→
Search Engine Optimization (SEO) is a collection of strategies to enhance a website’s ranking and visibility on search engines.

Footer

→
A footer is a section at the bottom of a web page.

Network Address Translation (NAT)

→
NAT (Network Address Translation) is a technique that enables communication between devices with private internet protocol addresses and the public internet.

Reference field

→
A CMS field used in Collections. This powerful field allows you to link to other Collections within your website to populate fields in Collection lists and Collection pages.

404 page

→
A 404 page is an error page a visitor sees when they try to access a non-existent or broken URL on a website.

Collection item

→
An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

Beacon

→
A beacon — also called a web beacon or web bug — is an HTML-embedded object that tracks user behavior on a web page.

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

Utility pages

→
Utility pages are default, customizable templates for your site’s 404 page, Password page, and Search results page.

Free plan

→
The perfect Webflow subscription&nbsp;for getting started, giving you access to all Designer features, so you can start building a site right away.

ALPN

→
ALPN stands for Application-Layer Protocol Negotiation. It’s a Transport Layer Security (TLS) extension that aids client and server identification during secure data transfers.

Color field

→
A color field specifies a graphical color picker or user interface for entering a color into a text field in a seven-character, hexadecimal format.

Item state

→
The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

Browser

→
A browser, or web browser, is a software program that allows users to access, navigate, and interact with websites on the internet.

Minimized CSS

→
A method of lowering the file size of your stylesheet(s) by removing all white space from your CSS files.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more