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
Margin

Margin

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

In CSS, the margin property sets the space between adjacent elements. If the margins of two adjacent elements overlap, the larger of the two margins takes precedence while the smaller collapses in a phenomenon known as “margin collapse.”

Examples of auto margins include many Apple, Google, and Stripe products. These design leaders set their margins to an element with a defined width to horizontally center an element within the boundary of its parent. The result is clean, consistent pages with enough whitespace to focus your attention on the featured product.

Many confuse padding with margins in CSS, but padding controls the amount of breathing room inside a box, while margins act as invisible barriers on the box’s exterior. Margins are a great way to create responsive content that maintains consistent spacing across all device types. 

Relevant courses

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.

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.

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

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.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Other glossary terms

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

Element edges

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

Null

→
“Null” represents the absence of a value or the presence of invalid objects in computer science and web development.

Top of the funnel

→
Top of the funnel (TOFU) refers to the initial marketing funnel stage where potential customers become aware of a brand’s existence.

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

Cascading rules

→
The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

Backlink

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

Display: inline

→
The display: inline CSS property is a display option that controls an element’s appearance and layout.

Div block

→
A generic element that is typically used to group content, or when no other element is specifically or semantically suitable. Div blocks have no effect on the content or layout until styled with CSS.

Select field

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

Button

→
A button is an interactive element that facilitates user actions.

Domain

→
A domain, or domain name, is the unique address that directs to a website on the internet.

UI state

→
The UI state changes how Collection lists display when you’re designing. The Items state is the default option, and shows the items that you have within the Collection. The Empty state doesn’t show these items and gives the designer the opportunity to design for a circumstance if/when there is no data to be displayed in the Collection list.

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.

DNS records

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

Base tag

→
The base tag specifies the base URL for all relative links within HTML code for a specific page or document.

Minimum height

→
The min-height CSS property defines an element’s minimum height.

Workspace plan

→
A Webflow plan that applies to your entire Workspace.

Delete element

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

Below the fold

→
Below the fold refers to the lower portion of a webpage that isn’t immediately visible to visitors upon loading until they scroll down.

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

Web server

→
A web server is a computer program or hardware device that delivers web content to clients using HTTP. It handles client requests for web pages, images, and videos.

Object-oriented programming (OOP)

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

Folder settings

→
Allows you to manage your folders.

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Image field

→
Available in CMS Collections. With this field, you can upload images from your computer and use them as dynamic items in your individual Collection item.

Java

→
Java is an object-oriented programming language for building dynamic, interactive web applications across platforms

Backup

→
A backup is a copy of data stored in an alternate location, including hard drives, cloud servers, or network-attached storage (NAS) servers.

Descendant selector

→
A descendant selector is a CSS (Cascading Style Sheets) selector that targets elements nested inside a parent element.

Percent

→
A measurement unit relative to an element's parent.

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

Flexbox

→
Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element.

Top margin

→
Top margin is a CSS property that defines the space between the top edge of an element and its surroundings, such as other elements, the browser window, or the edge of a container.

Sitemap URL

→
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

Embed component

→
A Webflow component you can use to embed HTML to display external content, plugins, or applications.

Wrapper

→
A wrapper is a programming language function for encapsulating and organizing elements within a well-defined interface.

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

List

→
An element that contains ordered (numbered) or unordered (bulleted) lists.

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

Head code

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

Parameter

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

Password protection

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

Urgency

→
Urgency is a marketing term and psychological trigger that incites potential customers and website visitors to act swiftly.

Second-level domain (SLD)

→
A second-level domain (SLD) is the part of a domain name that precedes a top-level domain (TLD).

Inheritance dropdown

→
A dropdown menu that displays all the selectors that affect a given element.

Header

→
A header is a section at the top of a webpage.

Media query

→
A media query is a CSS technique that applies different styles to a website or an app based on the characteristics of the device displaying it, such as screen size, resolution, and browser viewport.

Dither

→
Dithering is a design technique that simulates additional colors on a display to smooth transitions in images with limited color palettes.

Empty state

→
The state displayed when a Collection contains no Collection items, which gives you the opportunity to design for a situation where there's no content to display. Check out the Empty States blog for inspiration.

API

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

Save as Backup

→
The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).‍

Custom font

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

Position section

→
A section in the Style panel that houses CSS properties related to the positioning of an element.

ATAG

→
Authoring Tool Accessibility Guidelines (ATAG) are a layered rule-set that influence how designers and developers create a more accessible internet.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

Free plan

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

SVG (Scalable Vector Graphics)

→
Scalable Vector Graphics, or SVG, is a file format for displaying scalable vector graphics on the web.

Valid

→
A valid CSS pseudo-class is a keyword that enables styling HTML elements based on their state or position in the document structure or web page.

Syntax error

→
Syntax error refers to a mistake in code that violates the programming language’s rules and prevents the code from executing correctly.

CRLF

→
On Windows-based systems, the sequence of two ASCII characters representing a line break in text files is called "Carriage Return, Line Feed," or CRLF.

Front-end

→
The front-end refers to the visual and interactive part of a website or application that users directly interact with.

Media section

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

XML sitemap (sitemap.xml)

→
An XML (Extensible Markup Language) sitemap is a text file that lists a website's pages to help search engines crawl and index them.

Form block

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

IP address

→
An IP (Internet Protocol) address is a unique string of characters identifying devices connected to the internet.

Comparison shopping engine

→
A comparison shopping engine (CSE) is a search engine that compares ecommerce pricing, shipping costs, and customer reviews.

Total Form Submissions

→
The amount of times a site visitor submits data using your site's form(s).

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Return on investment (ROI)

→
Return on investment (ROI) is a metric evaluating the profitability or gain of a venture.

Paragraph

→
A typography element used for displaying multi-sentence text content.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Accessibility tree

→
A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.

Style panel

→
The first tab in the right-side panel that allows you to assign classes to elements and style them.

Baseline

→
The baseline is the fixed invisible line that serves as the base for letters. It’s used as a measurement for line height and x-height.

Authorized applications

→
Third-party applications that you've given access to your personal and/or website data.

Element settings panel

→
The second panel on the right side of the Designer. Here, you can change element-specific settings such as the element ID, Custom attributes, Search index settings, Editor settings, etc. You can learn more about the element settings for a specific element by searching for the element’s name on Webflow University.

Width

→
Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

Asynchronous

→
Asynchronous programming is an approach where programs simultaneously run multiple operations independently without waiting for previous tasks to complete.

Columns

→
Columns let you create sections of content that sit side by side on your website, like the columns in newspapers. You can choose how many columns you want and their widths. You can also control how they display on smaller screens — such as stacking them.

Ancestor

→
Any element that is further up the element hierarchy of the document tree. For example, the Body element is the ancestor of all elements on the Designer canvas.

Left toolbar

→
The vertical bar of tools on the left side of the Webflow Designer. It holds the Add panel, Symbols panel, Navigator panel, Pages panel, CMS panel, Ecommerce panel, Assets panel, Settings panel, Site Activity log, Audits, Search, Video tutorials, and Help.

Background

→
A website background is a visual element behind webpage content, enhancing aesthetic appeal and user engagement.

Forms section

→
A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

Python

→
Python is a high-level, object-oriented, general-purpose programming language (GPL).

URI

→
A Uniform Resource Identifier (URI) is a string of characters identifying an online resource.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Flex-sizing

→
A flexbox property that determines the resizing behavior of flex children across viewport sizes. They can shrink, grow, or remain static.

Site

→
What you create in Webflow! You can publish sites to a webflow.io staging subdomain for free, export the code on a paid plan, add hosting on any paid plan, or add a Site plan to any site to connect your custom domain and unlock hosting features.

Argument

→
An argument is an independent value a function receives to deliver a specific output.

Bottom bar

→
A bottom bar is a navigation bar at the bottom of an app or webpage.

Footer

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

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.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Call stack

→
A call stack is an ordered list of the functions (or stack frames) a program has to execute before it returns a result.

CMS section

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

Checkbox

→
Checkboxes are HTML structures that allow visitors to input data.

Hypertext transfer protocol secure (HTTPS)

→
Hypertext Transfer Protocol Secure (HTTPS) is a secure protocol facilitating encrypted exchanges of information between web browsers and servers.

Mutable

→
In JavaScript, mutable objects are dynamic elements that allow post-creation changes and modifications.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more