[{"data":1,"prerenderedAt":703},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/examples/spacers":270,"docs-bottom-nav":630},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":174,"body":272,"description":622,"extension":623,"meta":624,"navigation":625,"path":175,"seo":626,"sitemap":627,"stem":628,"__hash__":629},"docs/docs/examples/spacers.md",{"type":273,"value":274,"toc":617},"minimark",[275,279,288,291,296,299,363,366,393,400,442,450,461,465,472,534,547,551,558,583,585,597,603,613],[276,277,174],"h1",{"id":278},"spacers",[280,281,282,283,287],"p",{},"Vertical spacing in HTML emails can be tricky, mainly because of inconsistent support for (and rendering of) margin, padding, and ",[284,285,286],"code",{},"\u003Cbr>"," tags.",[280,289,290],{},"Here's how easy it is to create simple yet reliable spacers for your emails, using basic HTML and Tailwind CSS utility classes.",[292,293,295],"h2",{"id":294},"div","Div",[280,297,298],{},"The simplest vertical spacer for HTML emails:",[300,301,307],"pre",{"className":302,"code":303,"filename":304,"language":305,"meta":306,"style":306},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cdiv class=\"leading-4\" role=\"separator\">‍\u003C/div>\n","emails/example.html","html","",[284,308,309],{"__ignoreMap":306},[310,311,314,318,321,325,328,331,335,337,340,342,344,347,349,352,355,358,360],"span",{"class":312,"line":313},"line",1,[310,315,317],{"class":316},"soJEP","\u003C",[310,319,294],{"class":320},"sizJ4",[310,322,324],{"class":323},"sQMLp"," class",[310,326,327],{"class":316},"=",[310,329,330],{"class":323},"\"",[310,332,334],{"class":333},"sfCc6","leading-4",[310,336,330],{"class":323},[310,338,339],{"class":323}," role",[310,341,327],{"class":316},[310,343,330],{"class":323},[310,345,346],{"class":333},"separator",[310,348,330],{"class":323},[310,350,351],{"class":316},">",[310,353,354],{"class":320},"‍",[310,356,357],{"class":316},"\u003C/",[310,359,294],{"class":320},[310,361,362],{"class":316},">\n",[280,364,365],{},"How it works:",[367,368,369,378,384],"ol",{},[370,371,372,374,375],"li",{},[284,373,334],{}," sets the spacer's height with ",[284,376,377],{},"line-height: 16px;",[370,379,380,383],{},[284,381,382],{},"role=\"separator\""," indicates the element is a divider, improving accessibility",[370,385,386,388,389,392],{},[284,387,354],{}," adds 'content' inside, so that the ",[284,390,391],{},"\u003Cdiv>"," can take up height",[280,394,395,396,399],{},"You may specify a different height for smaller devices by using the ",[284,397,398],{},"sm:"," screen variant:",[300,401,403],{"className":302,"code":402,"filename":304,"language":305,"meta":306,"style":306},"\u003Cdiv class=\"leading-4 sm:leading-2\" role=\"separator\">‍\u003C/div>\n",[284,404,405],{"__ignoreMap":306},[310,406,407,409,411,413,415,417,420,422,424,426,428,430,432,434,436,438,440],{"class":312,"line":313},[310,408,317],{"class":316},[310,410,294],{"class":320},[310,412,324],{"class":323},[310,414,327],{"class":316},[310,416,330],{"class":323},[310,418,419],{"class":333},"leading-4 sm:leading-2",[310,421,330],{"class":323},[310,423,339],{"class":323},[310,425,327],{"class":316},[310,427,330],{"class":323},[310,429,346],{"class":333},[310,431,330],{"class":323},[310,433,351],{"class":316},[310,435,354],{"class":320},[310,437,357],{"class":316},[310,439,294],{"class":320},[310,441,362],{"class":316},[443,444,445,446,449],"alert",{},"\nResponsive heights will only work in email clients that support \n",[284,447,448],{},"@media","\n queries.\n",[280,451,452,453,455,456,460],{},"The ",[284,454,294],{}," spacer is also available as a ",[457,458,459],"a",{"href":160},"component",".",[292,462,464],{"id":463},"row","Row",[280,466,467,468,471],{},"Need to add space between ",[284,469,470],{},"\u003Ctable>"," rows?",[300,473,475],{"className":302,"code":474,"filename":304,"language":305,"meta":306,"style":306},"\u003Ctr role=\"separator\">\n  \u003Ctd class=\"leading-4\">‍\u003C/td>\n\u003C/tr>\n",[284,476,477,496,525],{"__ignoreMap":306},[310,478,479,481,484,486,488,490,492,494],{"class":312,"line":313},[310,480,317],{"class":316},[310,482,483],{"class":320},"tr",[310,485,339],{"class":323},[310,487,327],{"class":316},[310,489,330],{"class":323},[310,491,346],{"class":333},[310,493,330],{"class":323},[310,495,362],{"class":316},[310,497,499,502,505,507,509,511,513,515,517,519,521,523],{"class":312,"line":498},2,[310,500,501],{"class":316},"  \u003C",[310,503,504],{"class":320},"td",[310,506,324],{"class":323},[310,508,327],{"class":316},[310,510,330],{"class":323},[310,512,334],{"class":333},[310,514,330],{"class":323},[310,516,351],{"class":316},[310,518,354],{"class":320},[310,520,357],{"class":316},[310,522,504],{"class":320},[310,524,362],{"class":316},[310,526,528,530,532],{"class":312,"line":527},3,[310,529,357],{"class":316},[310,531,483],{"class":320},[310,533,362],{"class":316},[280,535,536,537,540,541,543,544,546],{},"The default ARIA role for a ",[284,538,539],{},"\u003Ctr>"," is ",[284,542,463],{},", so we use ",[284,545,382],{}," to indicate that this is a separator, not a table row.",[292,548,550],{"id":549},"semantic","Semantic",[280,552,553,554,557],{},"We can use an ",[284,555,556],{},"\u003Chr>"," to create a semantic Spacer.",[300,559,561],{"className":302,"code":560,"filename":304,"language":305,"meta":306,"style":306},"\u003Chr class=\"border-0 text-white my-4 min-h-full\">\n",[284,562,563],{"__ignoreMap":306},[310,564,565,567,570,572,574,576,579,581],{"class":312,"line":313},[310,566,317],{"class":316},[310,568,569],{"class":320},"hr",[310,571,324],{"class":323},[310,573,327],{"class":316},[310,575,330],{"class":323},[310,577,578],{"class":333},"border-0 text-white my-4 min-h-full",[310,580,330],{"class":323},[310,582,362],{"class":316},[280,584,365],{},[586,587,588,591,594],"ul",{},[370,589,590],{},"we hide the line by resetting the border",[370,592,593],{},"we give it the same color as the background of the page (for Outlook)",[370,595,596],{},"we control the height with top and bottom margins",[280,598,452,599,602],{},[284,600,601],{},"min-h-full"," class is used for compatibility with Apple email clients.",[443,604,606,607,609,610,612],{"type":605},"warning","\nDo not add \n",[284,608,382],{},"\n on the \n",[284,611,556],{},"\n spacer, as it is implied.\n",[614,615,616],"style",{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":306,"searchDepth":498,"depth":498,"links":618},[619,620,621],{"id":294,"depth":498,"text":295},{"id":463,"depth":498,"text":464},{"id":549,"depth":498,"text":550},"Creating reliable vertical spacing for HTML email with Tailwind CSS.","md",{},true,{"title":174,"description":622},{"loc":175},"docs/examples/spacers","yt8IzCSemWke0vWNfEaFM6Ckjcdm_t_XBVhkNJTaPPA",{"id":4,"extension":5,"items":631,"meta":702,"stem":195,"__hash__":196},[632,642,647,656,669,687,693],{"name":8,"items":633},[634,635,636,637,638,639,640,641],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":643},[644,645,646],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":648},[649,650,651,652,653,654,655],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":657},[658,659,660,661,662,663,664,665,666,667,668],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":670},[671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":688},[689,690,691,692],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":694},[695,696,697,698,699,700,701],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318593505]