Learn how the Body element holds your page content and how to style it across your site.
Every page you build starts with a Body element. It holds all of your other elements and content, so it's the foundation of your layout. Understanding how it works helps you style your whole site consistently and avoid surprises like unwanted horizontal scrolling.
Understand the Body element
When you start building a website, you start with a blank page. The Body element represents this page. Any time you create a new page, you automatically create a Body element, which is where you'll add all your future elements and content. Any element that you add to your page nests inside the Body element. No matter how many elements you nest inside other elements, they're all nested and organized in the Body element. Learn more about nesting elements.
Access the Body element
You can access the Body element through the Navigator or the navigation breadcrumb bar at the bottom of the Canvas. Because the Body element is the outermost element on the page, you can't delete or move it. You also can't assign a custom name to the Body element.
Style the Body element
Like any other element, you can style the Body element with classes, and you can use the same class to style other pages across your project. However, some styling options aren't available for the Body element, including position properties and opacity.
You also can't set a custom width for the Body element, because the browser handles its width automatically. To control how wide your content spans across the page, add a Box or a Quick Stack to the Body of your page.
Any content that's wider than the viewport overflows the Body element and causes horizontal scrolling, which is rarely desirable. To prevent unwanted horizontal scrolling, be mindful of element widths and negative margins. You can also hide the overflow on the Body element, but it's not recommended.
Style the Body tag
If you want all the pages in your project to have the same styling — such as the same background color on every page — style the Body (All Pages) tag. All styling you set on this tag is inherited by every Body element across your site, and any new pages use the same styling. Learn more about styling HTML tags.
If a Shared Library you installed includes Body (All Pages) tag styles, those styles apply first, and your site's own Body (All Pages) tag styles override them. Learn more about using shared Library tag styles.
To style the Body (All Pages) tag:
- Select the Body element in the Navigator or the breadcrumb bar
- Go to the Style panel (press S on your keyboard)
- Click inside the Style selector field
- Under HTML Tag, choose Body (All Pages)
- Set the styles you want
Note
If the Body element already has a class applied, remove the class from the Style selector field first. Then the HTML Tag options appear in the list.
Pro tip
To open the Style selector field quickly, select any element on the Canvas and press Command + Enter (Mac) or Control + Enter (Windows). Then type in a new class name, or use the up and down arrows to choose an existing class, and press Enter.
Text style inheritance
When you set typography styles on the Body, those styles pass down to all of the Body's children, i.e., every text element on your page. For example, if you edit the font family on the Body (All Pages) tag, all elements on all pages inherit the same font family. Changing the font family on an individual text element overrides the styles it inherits from the Body (All Pages) tag. Learn more about text style inheritance.
Note
Make typography changes on the Body (All Pages) tag to keep typography uniform across all pages.
Known issue: content at the bottom of the page isn't visible
Issue: Content in the page footer can get cut off, and you can't access it or scroll to it, even when editing the site in Webflow. This is called collapsing margins. It happens when content gets pushed out of the Body element at the bottom of the page, and it usually occurs when a Navbar is absolutely positioned.
Solution: Don't add top margin to the first element on your page when that element doesn't have a fixed position. Add top padding to the Body element instead.