Basic math in the Style panel

Calculating exact values can sometimes be difficult when moving from one app to another or when working to lay out elements that are perfectly positioned. In the Webflow Designer's Style panel, you can use basic math functions and easier calculations to get your designs pixel perfect.

Video transcript

</summary>

What is 5 plus 2 times 2 divided by 2 plus 7 times 2 times 3 divided by 2 times 5 divided by 7?<br>

[Grimur] 35.<br>

[Miguel] What are we doing? We’re doing arithmetic. And so is my phone.<br>

But that’s not the only thing doing arithmetic. We can do it in Webflow too.<br>

I’m constantly adding and subtracting pixels, rems, ems, percentages — right in the Style panel.<br>

If I wanna subtract 80 pixels from this 210 pixels... could I do all that in my head?<br>

Of course I can. But I’m very busy, so I can just type it right into the input field and press return. And it’s done for me.<br>

And it’s not just adding and subtracting.<br>

What if I had to mix arithmetic? (What if I want to take 130 multiply it by 2, and add 10?) Press Return? And it’s done for me.<br>

All of this follows P.E.M.D.A.S.<br>

[Grimur] Haha. What?<br>

[Miguel] Technically, M.D.A.S.<br>

[Grimur] Okay.

[Miguel] Please excuse my dear aunt sally?<br>

[Grimur] Please excuse who?<br>

[Miguel] It’s the mnemonic we use to remember the basic order of operations. In math. The M.D.A.S. part is the order in which multiplication, division, addition, and subtraction are calculated. Grimur?<br>

[Grimur] Mmm? Sorry, I fell asleep somewhere around “mnemonic.”<br>

[Miguel] It does. And that’s arithmetic in the Webflow Designer.

</details>

Video details

Duration

1:18

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Basic math in the Style panel",
  "description": "Calculating exact values can sometimes be difficult when moving from one app to another or when working to lay out elements that are perfectly positioned. In the Webflow Designer&#39;s Style panel, you can use basic math functions and easier calculations to get your designs pixel perfect.",
  "url": "https://university.webflow.com/videos/basic-math-in-the-style-panel",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b94363bcaf1a7c0d871509_626723a68e3dc626f1f2b186_WFU-Thumbnail-20(Basic-20math).webp",
  "duration": "1:18",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=2TlQ1zVltO4",
  "embedUrl": "https://www.youtube.com/embed/2TlQ1zVltO4",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}