Text component adds extra vertical space compared to HTML

Elements
1

Hi,
I noticed a difference between the built-in Text component and the HTML component when rendering the same heading.

In the attached screenshot:

  • The first “Treatments” is an HTML component.
  • The second “Treatments” is the built-in Text component.

Both display the same word using the same font, size, weight and line height.

I also verified that:

  • Text margins = 0
  • Text padding = 0
  • Parent Flex margins = 0
  • Parent Flex padding = 0
  • Parent Flex vertical gap = 0
  • Line Height = None

Despite this, the built-in Text component reserves noticeably more space above the text, while the HTML version produces a much tighter bounding box.

The HTML used for the comparison is simply:

Treatments

Is this intentional, or should the built-in Text component produce the same vertical metrics as a standard HTML heading?
Regards

Screenshot 2026-07-18 alle 5.49.03 PM
Screenshot 2026-07-18 alle 5.49.03 PM840×320 152 KB

2

That shouldn’t be the case, can you share a sample project via Elements Cloud so we can take a look for you?

3

Hi Dan,

Sure, here’s the project:

elementsapp://downloadDocument/jbYUjrwwwB1F

I use Elements 2.4.4

While investigating, I found something that might be useful.

Using Safari Web Inspector:

  • The HTML component renders a single <h2> with a computed font-size of 36px and line-height of 40px.
  • The built-in Text component renders an outer <h2> with font-size 48px and line-height 56px, while the visible text is inside a nested <span> computed at 36px / 40px.

This seems to explain why the Text component reserves more vertical space, although I’m not sure whether it’s expected behaviour or just a clue.

Hopefully this helps.

Thanks!

4

Ah, I see what’s going!

You’re styling the text twice, as you’ve also set an inline style on the text, watch the video below to see how to fix it:

Hope that helps clear things up :smiling_face:

5

Hi Dan,

Thank you! You were absolutely right.

It was my mistake — I had accidentally applied inline formatting to the text, so it was being styled twice without me realising it.

After clearing the inline formatting, everything works exactly as expected.

Thanks for the quick response and for taking the time to record the video. I really appreciate it!

Regards
Sandro

6

No problem, glad we got it sorted for you :smiling_face: