Margin collapsing

[michal-perlakowski]

Is margin collapsing supported? If not, is there any way to achieve a similar effect other than manually overriding margins based on siblings?

[jeetiss]

Hi @michal-perlakowski
no, margin collapsing isn't supported, because @react-pdf uses yoga-layout (this is flexbox engine), so all elements are located with display: flex and don't collapse.

is there any way to achieve a similar effect other than manually overriding margins based on siblings?

I'm not sure that I clearly understand you. Why do you need margin collapsing? Which problem you wanna solve?

[michal-perlakowski]

@jeetiss I have requirements from a UX designer that certain elements (headers, paragraphs) need to have certain margin before and/or after. But these margins can be shared between elements (i.e. collapsed).

So for example, there's:

• header1 with 20pt margin before and after
• header2 with 15pt margin before and after
• paragraph with 10pt margin before and after

Here's an example document with the correct margins:

<!-- 20pt -->
<header1 />
<!-- 20pt -->
<paragraph />
<!-- 10pt -->
<paragraph />
<!-- 20pt -->
<header1 />
<!-- 20pt -->
<header2 />
<!-- 15pt -->
<paragraph />
<!-- 15pt -->
<header2 />
<!-- 15pt -->
<paragraph />
<!-- 10pt -->

So without margin collapsing, I need to manually specify margins based on what is the previous and the next element.

[jeetiss]

Thanks for clarification.

Yes, margin collapsing is a feature of a block formatting context, but @react-pdf supports only flexbox. as I say before and it will not trivial to add this.

You can use component like this, otherwise you need to count sibling and manually overriding margins based on them! 🥲