实现笔记本纸张样式时的布局问题求助

直接用<div>绘制线条确实容易和文本布局冲突，推荐用CSS背景渐变来实现，完全不会干扰文本排版，还能轻松铺满页面。

核心实现思路 #

把笔记本的横线、竖线都作为容器的背景，文本直接写在容器内，相当于"写在纸上"，彻底解决布局移位、线条跟随元素移动的问题。

完整代码示例 #

HTML #

<div class="notebook">
  <p>这是第一行文本，就像写在笔记本上一样</p>
  <p>第二行文本，自动对齐横线</p>
  <p>调整字体大小、行间距也不会打乱线条布局</p>
</div>

CSS #

.notebook {
  /* 基础布局：让容器铺满可用空间，居中对齐文本 */
  width: 100%;
  min-height: 100vh;
  padding: 2rem 4rem; /* 左右留空给竖线区域 */
  box-sizing: border-box;
  font-family: 'Courier New', monospace; /* 模拟手写字体 */
  font-size: 1.2rem;
  line-height: 2; /* 行间距和横线间距对应 */
  
  /* 横线：重复的线性渐变 */
  background-image: 
    /* 竖线：左侧的单条竖线 */
    linear-gradient(to right, #ccc 1px, transparent 1px),
    /* 横线：重复的水平线条 */
    linear-gradient(to bottom, #ccc 1px, transparent 1px);
  
  /* 背景尺寸：竖线宽度+留白，横线间距和行匹配 */
  background-size: 4rem 100%, 100% 2.4rem; /* 2.4rem = 字体大小1.2rem * 行高2 */
  
  /* 背景定位：竖线靠左，横线从顶部开始 */
  background-position: left top, left top;
}

/* 可选：给段落去掉默认边距，让文本更贴合线条 */
.notebook p {
  margin: 0;
  margin-bottom: 0.2rem; /* 微调和下一条线的距离 */
}

关键优势 #

• 线条是背景，不会和文本元素产生布局冲突，怎么调字体、边距都不会让线条移位
• 背景渐变可以轻松铺满整个容器（甚至整个页面），解决竖线无法铺满的问题
• 行间距和横线间距通过line-height和background-size精准对应，文本自动对齐线条
• 无需额外的<div>元素，代码更简洁

自定义调整技巧 #

• 调整竖线位置：修改background-size的第一个值（比如改成5rem，同时调整容器的padding-left为5rem）
• 改变横线密度：修改background-size的第二个值，同时对应调整line-height
• 换线条颜色：把#ccc改成你想要的颜色，比如浅灰色#f0f0f0更像真实笔记本
• 添加纸张底色：给容器加background-color: #fffdf5;模拟泛黄纸张

内容的提问来源于stack exchange，提问作者DenardRaps