我試圖創(chuàng)建一個(gè)尺寸(203毫米x82毫米)的票寬度。這是在HTML和CSS通過python (cgi,jinja2,weasyprint)模板將被轉(zhuǎn)換為pdf格式,用戶可以通過網(wǎng)站上的按鈕下載。
HTML正文:
<body>
<div id="ticket"></div>
</body>
和我的CSS:
body{
margin: 0;
padding: 0;
height: 82mm;
width: 203mm;
background: red;
}
#ticket{
height: 82mm;
width: 203mm;
background-color: red;
margin: 0 auto;
}
@page{
size: 203mm 82mm;
margin: 0;
padding: 0;
}
我選擇了紅色,這樣看起來更好。即使當(dāng)主體和票有相同的顏色,我仍然在打印預(yù)覽中得到一個(gè)奇怪的邊框
在實(shí)際的pdf上也可以看到白條。 有人能幫我嗎?
通過將@page規(guī)則的margin屬性設(shè)置為0,可以刪除頁面上的默認(rèn)邊距。與此類似,從body元素中刪除默認(rèn)邊距需要將body規(guī)則的margin屬性設(shè)置為0。這樣做,你應(yīng)該保證你的票占滿了整個(gè)頁面,白條沒了。
此外,您可以考慮將#ticket元素的box-sizing屬性設(shè)置為border-box,它在元素的總寬度和高度中包括填充和邊框,因此您不必?fù)?dān)心它們會(huì)影響票證的整體尺寸。以下是您的CSS更改,包含以下更改:
@page {
margin: 0;
}
body {
margin: 0;
padding: 0;
height: 82 mm;
width: 203 mm;
background: red;
}
#ticket {
height: 82 mm;
width: 203 mm;
background color: red;
margin: 0 auto;
box-sizing: border-box;
}
刪除后
@page{
size: 203mm 82mm;
margin: 0;
padding: 0;
}
然后重啟電腦,我在片段中插入了一個(gè)片段?,F(xiàn)在可以用了。