Streaming live at 10am (PST)

Default top margin on H1 element - Why?

I’m just getting started with Webflow and I’ve fallen at the first hurdle. On a totally blank page, I added a single section with a header, paragraph and button. I noticed a 20px gap at the top of the page. I thought this might be default padding on the body, but it turns out there’s a default top margin of 20px on the H1 element. I have a coupe of questions - firstly, is this deliberate? And second, shouldn’t the margin be applied INSIDE the section ( ie. the white box ) instead of outside it? If I duplicate this section now there will be a 20px gap between each section, which I don’t want. Please refer to the attachment ( Body background is light blue for clarity )


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I was wondering the same about the default margin but I think it’s something that is just applied to most things by default…even when I make a presentation with Keynote, there’s some padding that I need to remove to get things how I like.

Depending on how you want your design to turn out will make one route better than the other. If you’re wanting to create space inside of a box, you should look to use padding rather than margin. Margin is more about creating separation between blocks

OK thanks Mike. I see it’s being inherited from “All H1 Headings” ( see attached ) but how can I override this? I’ve tried adding a custom attribute but not sure if I’ve done it right or if this is the correct way to do it - what I’ve done didn’t work.

inherit

custom

Nevermind I’ve sorted it - for some reason earlier when I went to Style Manager or viewed the inherited selectors, I could only see 3, and “All H1 Headings” wasn’t one of them. I’ve just tried the same thing again and now I see a much bigger list of selectors, including “All H1 Headings” - so I just modified that.

1 Like