Body element

Use the body element and manage all your site elements and content.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

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’ll be creating a body element. This is where you 'll add all your elements and content. Any element that you add to your page will be nested inside of the body element. No matter how many elements you nest inside other elements, they will all be nested and organized in the body element.

The body element in Webflow

Accessing the body element

You can access the body element through the Navigator or the navigation breadcrumb bar at the bottom of the Canvas. Since it’s the outermost element on the page, the body element cannot be deleted or moved.

The body element in Webflow

Styling the body element

The body element can be styled, like any other element, using classes. You can use the same class to style other pages across your project. However, some styling options are not available for the body element, including display settings, position properties, opacity, and transforms. You cannot specify a custom width for the body element either. That’s because the width of the body element is automatically handled by the browser. However, you can always specify how wide your content will span across your page by adding sections, containers, columns, and div blocks to the body of your page.

Any content that's wider than the viewport will overflow the body element, resulting in horizontal scrolling, which you rarely want. You can prevent this by being mindful of element widths and negative margins. You can always hide the overflow on the body element, but we don't recommend it.

Styling the body tag

If you want all the pages in your project to have the same styling — such as the same background color on all pages — you can style the Body (All Pages) tag. All styling set on this tag will be inherited by all body elements across your site. And any new pages that you create will have the same styling as well.

To style the Body (All Pages) tag:

  1. Go to the Styles Panel (S)
  2. Click inside the Selector field
  3. Select the Body (All Pages) tag from the inheritance menu
  4. Style away

Read more about styling HTML tags.

The body element in Webflow

Text style inheritance

When you set typography styles on the body, these styles are passed down to all its children, meaning all text elements on your page.

We recommended that you make typography style changes on the body tag to ensure that all pages have a uniform typography styling.

So, if you edit the font family on the body tag, all elements on all pages will inherit the same font family. However, changing the font family on any individual text element will override the styles inherited from the body element. Learn more about text style inheritance.

The body element in Webflow

Known issue: content at the bottom of the page is not visible in the Designer

Issue: One known issue with collapsing margins is where the content in the footer of a page is cut off. And, you are not able to access it or scroll to it even in the Designer. That's because the content is being pushed out of the body element at the bottom of the page. This issue usually occurs when using an absolutely positioned navbar.

Solution: To avoid this issue, don’t add top margin on the first element on your page when that element doesn't have a fixed position. Instead, add top padding to the body element.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by


Produced by


Written by


Article by


Edited by


Designs by

This video features an old UI. Updated version coming soon!