Rich text code block margin bug


I’m trying to style a code block element inside a rich text element. When giving the code block some bottom margin, the element gets the same amount of height added to itself for some reason (see image below).

I’m not sure if I’m doing something wrong, but this behavior isn’t happening with any other element inside the rich text element.

Anyone else having the same problem?

I noticed that as well, but only looked into it briefly.

At a glance, it appeared to be a mechanic of the <pre> element itself, and likely has to do with the history of how HTML evolved. I’ve only checked Chrome / Windows, it may or may not occur on other browser platforms.

It’s weird, and of course we want to be able to specify both padding and margin independently on code blocks, so if this is an HTML spec oddity I’m guessing Webflow would need to wrap the <pre> in a <div>, to fix this… which complicates API imports, etc. etc…

You may need to do that with Javascript and custom CSS if you’re determined to resolve it.

Thanks for the reply!

Yeah, that actually may be it. The pre-element itself seems to be a strange one. However, it also seems strange that Webflow has implemented it in a way that prohibits basic styling.

This is for a template, so I can’t really use custom code. I guess it’s best to ping the support and see if a fix is on the way :slight_smile: