首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当新页面上有条目时,Handlebar会在#中设置页边距顶部

当新页面上有条目时,Handlebar会在#中设置页边距顶部
EN

Stack Overflow用户
提问于 2021-06-07 14:04:38
回答 1查看 73关注 0票数 0

当我使用Handlebar遍历一个包含#each的大列表时,如果它不适合一页上的所有条目,它会自动生成一个新页面。在新的页面上,它没有页边空白处,看起来没有吸引力。如何设置与页边距的距离?

这是我的代码:

代码语言:javascript
运行
AI代码解释
复制
<table>
<thead>
<tr>
  <th></th>
  <th>{{Person.Known}}</th>
  <th>{{Person.Unknown}}</th>
</tr>
</thead>
<tbody>

{{#each OriginalDocuments.Documents }}
  <tr>
    <td>{{this.Name}} - {{@index}}</td>
    <td>
      {{#if this.Known}}
        <div>
          <img src="person_checkmark_Known.svg"/>
        </div>
      {{/if}}
    </td>
    <td>
      {{#if this.Unknown}}
        <div>
          <img src="person_checkmark_Unknown.svg"/>
        </div>
      {{/if}}
    </td>
  </tr>
{{/each}}

</tbody>
EN

回答 1

Stack Overflow用户

发布于 2021-06-08 19:46:10

您可以简单地将此代码添加到handlebars模板的style部分:

代码语言:javascript
运行
AI代码解释
复制
@page {
  margin: 10px 0; 
}

上面的代码将在最终生成的每个页面的顶部和底部添加10px的页边距。您可以使用@page设置您认为合适的样式,这将应用于每个页面。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67873140

复制
相关文章
【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )
RecyclerView.ItemDecoration 是抽象类 , 当前使用的 onDraw , onDrawOver , getItemOffsets
韩曙亮
2023/03/28
5.7K0
【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )
学位论文如何设置最规范的页边距和装订线距离?
1、点击[布局] 2、点击[页边距] 3、点击[自定义边距] 4、点击[上] 5、点击[左] 6、点击[装订线] 7、点击[确定]
裴来凡
2022/05/28
1.8K0
学位论文如何设置最规范的页边距和装订线距离?
CSS——边距
边距包括外边距(Margin)属性和内边距(Padding)属性,外边距属性定义了元素间的间隔,内边距属性定义了元素边框与内容区域之间的空白区域。
Html5知典
2019/11/26
1.3K0
webkit中BFC元素临近浮动元素时的边距bug
一直以来我们都很熟悉IE的“浮动边距加倍”的bug,并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。其实以webkit为核心的浏览器,包括但不限于Safari和Chrome,也有一个关于浮动和边距的bug,同样会造成布局错误。我在最近三个月的前一个月连续遭遇了两次这个bug,后两个月虽然避免了再次出现,但是直到现在才把这个bug彻底弄清楚。 触发这个bug的条件是: 在一个非浮动元素上应用overflow,且其值不为visible(这将形成一个Block Formatting Context元素)
小李刀刀
2018/03/06
1.8K0
webkit中BFC元素临近浮动元素时的边距bug
CSS_边距填充
填充:指向一个元素的内部,增加空间,(内边距),与外边距不同,填充会改变元素的大小。随着填充的增加,元素会被撑大。
bye
2020/11/24
1.1K0
CSS_边距填充
【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )
向 HTML 的 <body> 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 , 如下图所示 :
韩曙亮
2023/03/30
2.7K0
【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )
css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.) 为其正名 我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设
前朝楚水
2018/04/03
1.9K0
css负边距之详解
R|绘图边距及布局
简单介绍一下如何调整绘图区域及边距区域,如何将多个图形绘制在一张图中,并根据图形的大小及特性调整一下图形分布。
生信补给站
2020/08/06
2.5K0
css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.) 为其正名 我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设
用户1667431
2018/04/18
2.3K0
css负边距之详解
[Java小工匠]CSS盒子模型-边距合并
  CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。
Java小工匠
2018/08/10
1.1K0
[Java小工匠]CSS盒子模型-边距合并
CSS盒模型及边距问题
盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外边距,边框,内边距,内容组成,
菜的黑人牙膏
2019/01/21
1K0
visibilitychange – 指定标签页可见时,刷新页面数据
一通过监听浏览器页面可见性改变(visibilitychange)事件,来判断标签页是否可见
全栈程序员站长
2022/07/02
7380
iOS·UITableView分割线颜色,隐藏,边距(宽度,起点)等设置
1. 除掉UITableView底部多余行及分割线: self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 2. 隐藏所有的分割线 self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 3. 设置分割线横条的颜色 self.tableview.separatorColor = [UIColor redColor]; 4. 设置分割线
陈满iOS
2018/10/11
6.6K0
清空默认边距的完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-清空默认边距</title> <style> /* *{ margin: 0; padding: 0; } */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,c
贵哥的编程之路
2020/10/28
1K0
【说站】css边距重叠是什么
css边距重叠是什么 1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起,构成单一边界。 可以相邻也可以嵌套,其中没有非空内容、补白、边框。        .neighbor{ height: 100px; background: red; } .father{ background: #f436365e; } .child{ height: 100px; margin-top: 10px; background: #00800047; } <div> this is neighbor </div
很酷的站长
2022/11/24
1K0
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
下图中 , 中心 100 x 100 像素 的 是内容 , 内容外侧 , 边框内侧 , 就是 内边距 范围 ;
韩曙亮
2023/03/30
9160
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
网站顶部设置灯笼
自定义CSS .deng-box { position: fixed; top: -40px; right: -20px; z-index: 999; } .deng-box1 { position: fixed; top: -30px; right: 30px; z-index: 999; } .deng-box2 { position: fixed; top: -30px; left: 30px; z-i
院长技术
2021/02/19
9250
【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )
文章目录 一、盒子模型外边距设置 1、外边距属性单独设置 2、外边距属性复合写法 一、盒子模型外边距设置 ---- 盒子模型外边距 Margin 用于控制 盒子 与 盒子 之间的距离 ; 1、外边距属性单独设置 外边距设置语法 : margin-left : 设置 左外边距 ; margin-top : 设置 上外边距 ; margin-right : 设置 右外边距 ; margin-bottom : 设置 下外边距 ; 代码示例 : <!DOCTYPE html> <html lang="en">
韩曙亮
2023/03/30
9730
【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )
【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )
如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ;
韩曙亮
2023/03/30
1.6K0
【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )
点击加载更多

相似问题

当页边距-顶部存在时忽略CSS -页边距-底部

19

当display设置为inline时,页边距-顶部无效

348

Css页边距-顶部与页边距-底部

82

jquery页边距顶部

10

如何为表头设置页边距顶部?

22
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档