浏览器打印 HTML 页面时，底部出现 空白页 的解决办法（原因是body元素自带8px 的margin外边距！！！）

最新推荐文章于 2025-01-15 10:26:07 发布
最新推荐文章于 2025-01-15 10:26:07 发布
阅读量1w 收藏 8
点赞数 4
CC 4.0 BY-SA版权
分类专栏： web程序设计 文章标签： 浏览器 打印 空白 页 处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38190111/article/details/88042546
本文揭示了一个常见但鲜为人知的问题：在使用HTML页面生成PDF时，由于body元素默认带有8px的margin，导致额外空白页的生成。通过将body的margin设置为0，可以有效避免这一问题，确保PDF输出的整洁。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

真是坑死人不偿命 百度就不用说了，我去 stackoverflow 查了半天，没有任何一个人解决了我的办法，后来我自己火眼金睛。。。

鄙人用一个自己写的html 页面 利用浏览器的打印功能 去生成pdf 一直会有多余的一页空白页生成，最后发现原因如标题所述：

body元素自带8px 的margin外边距！！！

body元素自带8px 的margin外边距！！！

body元素自带8px 的margin外边距！！！

然后当你把 html 和 body 的height 都设置为 100% 之后，其实 你的HTML 页面内容已经超出了一页（多了8px！！！）

像这样：

可以看到打印后最后一页空白页到底是怎么来的呢？ 

看看这万恶的 8px （红色波浪） 罪魁祸首有木有

 然后解决办法 就简单了，把css 的body{margin：0}   把外边距设置为0即可

效果：

可以看到最后一页后就没有下一个空白页了！！！

因为没有了8px的多余~~~~~~~~

满满的，很贴心~~~~~~ 

html移动端底部空白,PC端页面布局，在移动端查看头部和底部出现留白
weixin_34892992的博客
06-15 876
问件览客需和下于有快都业视的事一房望站是有题出现：body，html未填充满可视抖要支圈者器说是事天开的。年后编定功口小发还区域页面布局：页面内容初始化样式：html, body, div,iframe, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe,...
【利用printJS + html2canvas实现页面打印的解决方案（解决第一页空白问题）】
siv2333的博客
10-25 878
利用printJS + html2canvas来实现页面打印的解决方案 (解决第一页空白问题)
打印html文件都是空白页,我打印时的额外空白页面(IE中除外) – 是我的打印css吗？...
weixin_39579127的博客
06-22 549
我正在使用print css来隐藏某些元素,并在我不需要它时停止分页符.用户可以选择在打印之前隐藏部分.我的问题是,当我打印预览时,总会有一个额外的空白页面(最后在Chrome和Firefox中,在Opera的开头),我无法弄清楚原因. IE没有问题,没有额外的页面(这是令人震惊的…)我非常感谢一些意见.我试过制作容器div page-break-after：avoid;和page-break-a...
html打印多了空白页,为什么打印Word文档会多打印出一空白页
weixin_39653361的博客
06-20 2323
当我们在打印Word文档时，难免遇到多打印出一空白页的情况！为什么会这样呢？原因很多，比如：①空白页上有回车符，但是该页未包含任何字符，让文档多占据一页；②空白页上有分页符；但是该页未包含任何字符；③页面中存在表格，由于多按了回车符，导致表格分割到空白页，但是空白页却没有任何字符；等等……很多的！以下为相应的解决办法：①如果是回车空行过多造成空白页，解决的方法很简单，删除空行就行了。②可以先在空白...
如何填满word页面_Word文档空白页删不了？4个方法总有一个能解决
weixin_39824801的博客
01-08 918
关注【新精英充电站】每天进步一点点做文档最气人的事莫过于文档做了却有空白页删除不了其实用这4个方法没有解决不掉的空白页1.删除空格Word文档的最后出现一页空白页，首先就要检查，是不是不小心多敲了空格。如下图所示，光标在空白页中闪动，十有八九就是有多余的空格。如果你觉得凭肉眼很难判断有没有空格，那你可以单击【显示/隐藏编辑标记】这个按钮，将空格编辑显示出来。页面左边的小箭头，就表示这些都...
body有8px的神秘边距
ZF的博客
11-02 2621
首先，你需要知道为什么会有8px的神秘边距： 很多元素默认有一个8px的 margin，而且在不同浏览器上表现效果不同 在项目中，通常都是使用reser.css重置所有的样式表，可以保证在所有浏览器下，项目展示的样式是一致的： （1）在项目中应用：在asset的css中插入reset.css文件， // main.js import @/assets/css/reset.css （2）或者在demo这样写： <style> * { margin: 0; padding: 0; } &l
html打印有空白页
Don't lost way
05-09 4785
网页打印，前面总有一张空白页，这种情况也许是css坏的事。 查看源代码后发现如下一行代码： <div style='page-break-before:always'></div> 这是css控制强制分页的代码，去掉之后一切恢复正常。 ...
wordpress wp_head()函数使页面顶部总空白28px
01-20
在wordpress主题中的header.php中，有一个wp_head()函数，表面上看不出什么玄机，只能在浏览器中查看源代码才能看出它所生成的如下代码: 复制代码代码如下: <...这样使页面顶部总空白28px ，虽然
vue【利用printJS + html2canvas实现页面打印】（解决第一页空白问题）
weixin_42065453的博客
01-15 1030
最近，我接到一项需求，需要实现弹窗内表格的打印功能。这促使我深入研究了 Vue 中与页面打印相关的技术，并在此过程中积累了宝贵的经验。借此机会，我愿将这些心得整理成文，与各位同仁分享，希望能够共同探讨、互相学习，携手提升我们的技术能力。通过巧妙结合 `printJS` 和 `html2canvas`，前端开发人员可以在网页应用中实现高效且高质量的页面打印功能。这一解决方案不仅简化了开发流程，还确保了打印输出的一致性和视觉质量。
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
然而，这种方式在遇到滚动条时会出现一个问题，即页面内容在滚动条出现和消失时发生跳动，影响用户体验。这是因为滚动条的出现会占据页面的可用宽度，导致原本居中的内容发生偏移。 为了解决这个问题，通常有两种...
window.print打印总是多出一页空白页
m0_46423771的博客
06-19 1407
也没有设置打印页面的高度，不存在高度导致出现第二页空白，不符合。图片高度设置太高，导致出现第二页空白，不符合。打印页面的第一个标签不是h系列，不符合。最后发现是这个，设置之后就好了。在优快云用找了半天答案，
html打印预览空白,打印预览空白,网页打印空白原因及解决办法汇总
weixin_42633137的博客
06-25 3140
打印预览空白，网页打印空白原因及解决办法汇总故障表现：1.网页没有加密过，word什么的打印预览正常。进行网页打印,预览时是空白的,只出现页码和在最下面本该显示该网站域名的地方出现file://C:\WINDOWS\TEMP\d7Y7QZJF(此处根据网站不同而不同).htm。在浏览网页时点击打印预览，显示出来的是一张白纸。2.有的网页可以正常预览，有的网页预览，打印都是空白，页脚显示file:/...
js 打印预览时默认为横向_打印属性里那些特殊有用的设置，少人知
weixin_39966644的博客
11-27 848
今天跟大家分享下驱动属性的一些设置(柯美/震旦机型适用)。我们在打印时选好打印机后点击“属性”，可以看到如下界面这个界面是基本选项的设置，主要是打印的方向、单双面、彩色或黑白打印等。这些都是常用的功能选项，没什么特别的。今天主要分享的是“布局”和“图像品质”这两个选项里的一些特别的设置。首先我们点击“布局”可以看到如下界面预览框可以预览我们对页面内容所做的设置，比如我们勾选“版面分页”，选择“2分...
html打印页面设置缩放,js使用页面打印window.print() 记录，并进行缩放打印
weixin_29214691的博客
06-03 3754
//打印print:function(){//获取打印的页面内容let subOutputRankPrint = document.getElementById('print-div');let newContent = subOutputRankPrint.innerHTML;let oldContent = document.body.innerHTML;document.body.inner...
css打印如何去掉空白页,vue打印会多出一页空白页的坑
weixin_29147539的博客
08-03 2027
在vue项目上需要打印功能，使用了vue-print-nb这个打印组件。但是在使用的时候一直会有一个问题：就是打印的时候总会在结尾多出一页空白页。经过一系列踩坑排查终于发现，原来是因为我的样式上对html，body，设置了高度100%。html, body, #app {margin: 0;padding: 0;height: 100%;}在打印的时候，虽然我们肉眼认为是空白的，但是系统认为是有内...
html文件打印出白纸,打印机打出白纸怎么回事 原因及维修方法介绍
weixin_42523529的博客
06-27 902
打印机是日常工作中人们经常接触到的机器，为了方便使用很多家庭也会采购小型的款式放在家中。但是在使用的时候有的人反映，会有打出白纸的现象，对于这种现象大家知道原因是为何吗？以及具体的解决方式又有哪些呢？下面小编就为大家带来打印机打出白纸怎么回事，原因及维修方法介绍。一、打印机打出白纸的原因首先要找出打印出白纸的原因，才能更好的解决问题。常见的原因有高压导致电路故障；粉盒内没有无墨粉；激光扫描系统中的...
css打印如何去掉空白页,如何将打印时的空白页去掉
weixin_39699670的博客
08-03 702
真不知道调整margin要到什么时候才能不出现空白页。我又换了这样的代码：function SetPrintSettings() {factory.printing.portrait = true; //方向，truefactory.printing.leftMargin = 21.0;factory.printing.topMargin =2.0 ;factory.printing.ri...
[css] body的默认margin值
weixin_36210698的博客
03-22 5225
body的默认margin值 一般浏览器中都对body标签进行默认的margin设置为8px，当然，不同的浏览器会设置成不同的值，它是由浏览器的user-agent-stylesheet提供了，chrome提供的如下： body { display: block; margin: 8px; } 有些浏览器的user-agent-stylesheet可以由用户进行修改，而有的浏览器...
请根据以下要求，为 HTML 页面编写 CSS 代码，使其符合预期的布局和样式。 1. 全局样式 所有元素的 box-sizing 设为 border-box，确保宽度和高度计算时包括 padding 和 border。 去除 body 的默认外边距，确保页面边缘没有多余空白。
最新发布
03-29
<think>好的，我需要帮助用户编写一个全局的CSS样式，让所有元素的box-sizing设为border-box，并且移除body的默认外边距。首先，我应该回忆一下相关的CSS知识。 首先，box-sizing属性决定了元素的宽度和高度的计算方式。默认是content-box，也就是元素的宽高只包括内容区域，加上内边距和边框后会导致元素实际占据的空间变大。而设置为border-box的话，元素的宽高会包括内容、内边距和边框，这样布局更容易控制。用户希望所有元素都应用这个属性，所以应该使用通配符*来选择所有元素，并设置box-sizing为border-box。不过，可能还需要加上浏览器厂商前缀，比如-moz-box-sizing和-webkit-box-sizing，以兼容旧版本的Firefox和Safari，不过现代浏览器可能已经不需要了，但为了保险起见，加上可能更好。 接下来是移除body的默认外边距。body元素在浏览器中默认有margin，通常是8px左右，这会导致页面顶部和内容之间有空白。用户希望移除这个默认外边距，所以需要将body的margin设为0。 另外，可能还需要考虑继承问题。通常，box-sizing属性不会被子元素继承，但使用通配符*可以确保所有元素都应用这个设置。不过，有时候可能会有第三方组件或某些元素覆盖这个设置，但通配符选择器的优先级较低，可能需要用户注意样式的层叠顺序。 然后，我需要检查是否有其他需要注意的地方。例如，用户提到的引用内容中提到了使用正确的CSS前缀，以及移除空的CSS规则等优化建议。不过在这个例子中，主要关注的是全局样式的设置，所以可能不需要涉及这些优化步骤，但可以提醒用户注意这些最佳实践。 现在，把这些思路整理成代码。首先是通配符选择器设置box-sizing，包括带前缀的属性和标准属性。然后是body的margin设为0。可能还需要将html和body的高度设为100%，以便在某些布局中更好地控制高度，但用户没有提到这点，所以可能不需要。 测试一下代码是否正确： * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; } 这样应该能满足用户的需求。不过要注意的是，使用通配符可能会对性能有轻微影响，但现代浏览器处理得很好，所以通常可以接受。 最后，用户提供的引用[1]中提到将div的box-sizing设为border-box，并且使用width:50%和浮动来布局。这可能是一个两栏布局的例子，但用户的问题更关注全局设置，所以不需要涉及具体的布局结构，只需确保所有元素都应用了正确的box-sizing。 总结一下，正确的CSS代码应该包括通配符选择器设置box-sizing，并移除body的默认margin。同时，确保加上必要的浏览器前缀，尽管现代浏览器可能不需要，但为了兼容性还是加上比较好。</think>要实现全局CSS样式设置，请按照以下步骤操作： 1. **设置全局盒模型**： ```css * { -moz-box-sizing: border-box; /* 兼容Firefox */ -webkit-box-sizing: border-box; /* 兼容Safari/Chrome */ box-sizing: border-box; /* 标准语法 */ } ``` 这会强制所有元素采用border-box计算方式，使元素宽度包含padding和border[^1] 2. **清除body默认边距**： ```css body { margin: 0; /* 移除默认8px外边距 */ } ``` 3. **完整代码示例**： ```css * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; } ``` 注意事项： - 建议将这段代码放在CSS文件开头 - 使用通配符选择器(*)会影响所有元素，包括伪元素 - 对于需要特殊盒模型的第三方组件，可通过局部样式覆盖 - 注意浏览器兼容性，老版本Safari(5.1-)需要-webkit前缀[^2]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值