Hey,
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 
Hey Robin,
Found a solution that I like a lot, and it’s CSS only so it should work in templates. Note I’ve only tested it on Chrome, so test it out on some other browsers and let me know how it works for you.
Thank you very much, hopefully that’ll help out other users with the same problem.
Unfortunately the template guidelines prohibits any use of custom code so I decided to just go without the code block at all.
Including custom CSS? I was certain I’d seen custom CSS in templates, just not JS. You might double check that.
Yep, the only allowed CSS is for font smoothing:
Custom code (in site settings, in embeds, in page settings) is not allowed in Templates, except for:
