University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Left margin

Left margin

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

By adjusting the left margin, you can change the horizontal position of an element to align texts or images within a container.

Margins can also visually separate content, create a sense of hierarchy, and improve the overall readability of a site. For example, the margin-left 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-left property looks like:

<div style="margin-left: 15px;">

  <p>sample text</p>

</div>

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

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

Relevant courses

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.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

CMS & dynamic content

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

SEO fundamentals

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

Other glossary terms

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

IP address

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

Sorting Collection lists

→
You can sort your Collection items in multiple ways — select the field from the Collection you wish to filter from, then select the ordering option.

Collection list layout

→
Lets you control how Collection items display inside a Collection list. The default layout option has each item covering the full width of the parent element. You can change this to display Collection items in 2, 3, 4, or 6 columns.

Subdomain indexing

→
When a search engine crawls your site's Webflow subdomain (e.g., your-site.webflow.io).

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

Layout section

→
A tab in the Add panel that houses prebuilt layouts for your Webflow site.

Literal

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

Font weight

→
Font weight refers to the thickness or density of a typeface’s strokes.

Content management system (CMS)

→
A content management system (CMS) is a tool for creating and managing a website and its content.

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.

Asynchronous

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

Folder

→
A folder is a subdirectory of your site's root folder for organizing web pages.

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.

Dither

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

Video field

→
Available in CMS Collections. You can add videos via a link — not an embed code — from an online video host like Vimeo or YouTube. Just paste in the video link and it’ll appear in the native video format from the 3rd-party video player.

Custom domain hosting

→
A Webflow service that lets you point a custom domain to your Webflow-hosted site.

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.).

Heading

→
A heading is a text element that provides a title or headline for a section of content on a webpage. These elements guide users and search engines through your content.

Preview mode

→
A feature that allows you to see how your site would be displayed in a browser without needing to publish your site or leave the Designer.

Flex-grow

→
The flex-grow CSS property defines how much an element grows relative to other flexible items inside the same flex parent.

Domain

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

Syntax error

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

Conditional

→
Conditionals, also known as conditional statements or expressions, are coding instructions that tell a program to execute an action for a certain condition.

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

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.

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.

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.

Pixel

→
A pixel (px) is the smallest unit of measure in a digital image or display, representing a single point of color or light.

Traffic

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

Homepage

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

Resolution

→
Resolution is a metric measuring clarity and detail through the number of pixels displayed on a screen or used to render an image.

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.

Collection

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

Content optimization system (COS)

→
A content optimization system (COS) is software that lets you optimize website content to attract more traffic.

Prefetch

→
Prefetch is a technique that proactively loads and caches resources to improve website performance and user experience.

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.

Display: none

→
Display: none is a CSS property that hides website elements. This code tells the document flow to ignore the element entirely, making it invisible.

List

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

Flex-direction

→
Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

URI

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

Selector

→
A selector identifies and selects specific HTML elements to apply CSS styles to.

Sibling

→
An element that shares the same parent of another element.

Design mode

→
The mode that enables a designer to build in Webflow.

Flex-justify

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the main axis of the flex container — that is, whatever you defined as the flex-direction. Options include start, center, end, baseline, and stretch.

Static page

→
A static page is a document with fixed content that makes up an individual web page on your site.

Sitemap URL

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

Gamut

→
Color gamut describes the full range of colors a device can reproduce on its display.

Mobile (portrait) breakpoint

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

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.

ASCII

→
The American Standard Code for Information Interchange (ASCII) is an encoding standard that assigns numerical values to characters and translates them into computer-readable code.

Bottom margin

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

Element breadcrumbs

→
A navigational aid that displays in the bottom of the Webflow Designer to&nbsp;help you keep track of the element you're interacting with in relation to its hierarchy.

Account notifications

→
Account notifications update you about activity in your account. New notifications appear on your Webflow Dashboard after you log in.

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

Minified code

→
Minified code refers to the process of removing unnecessary characters and whitespace from the source code file without affecting its functionality.

Folder settings

→
Allows you to manage your folders.

Right margin

→
Right margin is a CSS property that defines the space between the right edge of an element and its surroundings.

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

Structured Query Language (SQL)

→
Structured Query Language (SQL) is a programming language that enables storing, retrieving, and manipulating information in a relational database.

Buffer

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

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.

API

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

Urgency

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

Tutorials

→
The fastest way to learn how to use Webflow.

Dropdown

→
A dropdown, or dropdown menu, is a pre-built navigation element you can add to almost any part of a website.

Typography section

→
A section in the Style panel that houses CSS properties related to how typography is displayed such as font, font size and height, and align.

Algorithm

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

Cascading rules

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

User interface (UI)

→
A user interface (UI) is any visual element humans interact with on a device, webpage, or application.

URL

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

Authorized applications

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

Section

→
A section is an element of design layout that divides a web page into visually distinct segments.

Google site verification meta tag

→
Adding a Google site verification meta tag to your website's HTML code allows Google to verify that you own the site.

Pagination settings

→
Through the pagination settings, you can preview Collection list pages by choosing the page number from the page dropdown list, or you can switch to the previous or next page using the arrow keys.

Syntax

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

ATAG

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

Second-level domain (SLD)

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

Document type definition (DTD)

→
A document type definition (DTD) defines the structure, validity, and attributes of standard generalized markup language (SGML) documents, such as GML, HTML, and XML.

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).

Slider

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

Target

→
The currently selected element.

Browser

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

CRUD

→
CRUD stands for Create, Read, Update, and Delete — the four basic operations all software applications should perform.

Alt text

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

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.

BiDi

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

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.

Utility pages

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

Collection list

→
A Collection list is a Webflow element that lets you dynamically display content from a CMS Collection.

Comparison shopping engine

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

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.

X-Ray mode

→
A grayscale view of your site’s canvas that visually displays each element’s border, margin, and padding when hovered over.

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.

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.

Link

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

Product attribute

→
Product attributes are specific characteristics that define purchasable merchandise or commodities and provide relevant information to customers.

Left margin

→
Left margin is a CSS property that defines the space between an element's left edge and its surroundings.

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.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more