[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"code-html-\u003C!-- Gap below title -->\n\u003Ch1 class=\"mb16":3,"code-html-\u003C!-- Push element up in flex container -":4,"code-html-\u003C!-- Element overlap effect -->\n\u003Cdiv cla":5,"nav":6},"\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">&#x3C;!-- Gap below title -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mb16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Page Title&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mb8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>First paragraph&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mb8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Second paragraph&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">&#x3C;!-- Form field gap -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">label\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"db mb4px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Name&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">input\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"text\"\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"w100p mb16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">label\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"db mb4px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Email&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">input\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"email\"\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"w100p mb16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Submit&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">&#x3C;!-- Card list (using mb instead of gap) -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mb2rem bg18181B p2rem br8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Card 1&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mb2rem bg18181B p2rem br8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Card 2&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg18181B p2rem br8px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Card 3 (no mb on last)&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">&#x3C;!-- Push element up in flex container -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"df fdc h40rem\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">header\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"mba p2rem bg18181B\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Pushed up (always at top)&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">header\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">main\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"p2rem\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>Takes remaining space&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">main\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki one-dark-pro\" style=\"background-color:#282c34;color:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#7F848E;font-style:italic\">&#x3C;!-- Element overlap effect -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg6366F1 p2rem cFFFFFF neg-mb16px\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Overlaps 16px below\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#98C379\">\"bg18181B p2rem pt3-2rem cFAFAFA\"\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">  Overlapping element (compensated with pt)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ABB2BF\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[],1775225738749]