Always bottom margin when using custom css for card

[NaNull]

When I customize my Anki card style, everything looks good in the preview window. But when I actually study, there is always an inexplicable margin at the bottom of the window.

// my card
<div id="kard">
	<div class="content" style="font-size: 18px; ">
		{{Back}}
	</div>
</div>

// my CSS
html {
margin: 0 !important;
padding: 0 !important;
height: 100vh;
min-height: 100vh;
}
html body {
margin: 0 !important;
padding: 0 !important;
height: 100vh;
min-height: 100vh;
}
.card {
height: 100%;
min-height: 100%;
width: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
font-size: 20px;
line-height: 32px;
color: #fff;
background: -webkit-linear-gradient(-180deg, #FAF8E6 0%, #F5F9FF 100%);
background: linear-gradient(-180deg, #FAF8E6 0%, #F5F9FF 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#kard {
padding: 0px 0px;
word-wrap: break-word;
}
#kard .content{
width: 80vw;
max-width: 900px; 
box-sizing: border-box;
margin: 0 auto;
background: -webkit-linear-gradient(-20deg, #1C07A2 0%, #2509D3 100%);
background: linear-gradient(-20deg, #1C07A2 0%, #2509D3 100%);
padding: 20px 16px;
border-radius: 12px;
text-align: justify;
box-sizing: border-box;
text-align: center;
}

It looks good in preview window：

But, why?

[hkr]

Maybe going to Tools → Preferences → Appearance → Distractions and enabling Minimalist mode (极简模式 in Chinese) will help. If that option is disabled, it doesn’t appear to work in some cases if you have complex styles set for html or body elements, or if you are setting the background dynamically with Javascript.

[NaNull]

Thanks a lot. It works.