Clear fix and margins are common in every website design. The nature of HTML forces us to clear our content or use margins for spaces, to prevent clipping. Export Kit will output your designs as-is, so there are cases where what you see – is not what you expect! Export Kit will measure the contents of a folder based on the children layers.

NOTE: This mainly affects Dynamic Height and Responsive Designs (not including Android).

NOTE: Export Kit will calculate the position and size of a container based on its child-elements.  If you expect the container to have padding and marings with elements, then you must use a shape background or skip margin to define the area. 

In the image above – assume we are working on the “Our Process” content block. You’ll note that we show where the content "starts" and "stops" in the design area with the red squares. This is where Export Kit will measure the region of the content block.

IMPORTANT: If you do not set the area of the folder container with a background shape - your content position and size may have unexpected display errors.

Step 1: Note The Margins You Need

You will need to specify the space or area of your design blocks. Because Export Kit will measure your folders as-is, you need to add elements to each section to state the true size of the design.

Eg. If the "Our Process" area design includes the margins around the text to create the "box", then we need to tell Export Kit that using a shape background or skip margin.

NOTE: If you do not specify the true content area, the output will clip the excess space.

Step 2: Fix Your Margins

The best way to solve this issue is to:

1: Add a background shape so the content area has a background and natural margin

IMPORTANT: Using a shape background will mimic natural padding and margins as your content will remain in its visual position.

— or —

2: Add custom fix elements to state the output margins.

Both methods will tell Export Kit that your “Our Process” area fills the region of the box, and your text starts and stops inside that area – rather than the text clipping in the output.

The ${skip} Fix Margin

A skip fix margin is a shape layer with a ${skip} tag applied so it is not included in the output. Fix margins are an easy way to denote content areas and margins in the output.

NOTE: Only the y and the height of the fix margin is calculated in the output.