css怎么修改行间距
作者：互联网
2026-04-14
HTML教程
css修改行间距的方法：1、新建一个html代码页面；2、在html页面添加两个div元素并同时设置一些文字；3、对其中一个div元素添加一个class类为big用于设置行高；4、使用line-height设置big类的行高即可，语法“.big{line-height: 行间距值;}”。
本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
打开html开发工具，新建一个html代码页面，然后在这个html页面输入两个
同时设置一些文字，对其中一个
添加一个class类为big用于设置行高。
创建
代码：标签后面创建一个<style>标签，然后使用line-height设置big类的行高。</p><p>css样式代码：</p><pre class="brush:php;toolbar:false"><style type="text/css">.big{line-height: 300%;}</style></pre><p style="text-align:center;"><img src="https://images.jiaoben.net/uploads/20260321/img_69bd94b3a008132.jpg" /></p><p>保存html页面，使用浏览器打开，即可看到浏览器页面上含有big类的div标签里的行间距变大了。</p><p style="text-align:center;"><img src="https://images.jiaoben.net/uploads/20260321/img_69bd94b3a008b33.jpg" /></p><p>推荐：《css视频教程》</p><p>
</div>
<div class="lastanext flexRow">
<a class="lastart flexRow" href="/wz/325292.html" ><span>上一篇：</span><span>上下文隔离的两种模式</span></a>
<a class="nextart flexRow" href="/wz/325294.html" ><span>下一篇：</span><span>css怎么选择所有子元素</span></a>
</div>
</div>
<div class="dtl-xgtj">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>相关推荐</p></div>
</div>
<div class="tjlist flexRow">
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/364657.html" >
<img src="https://images.jiaoben.net/uploads/20260416/logo_69e03f9a59a471.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/364657.html" >基于 SelectDB 实现 Hive 数据湖统一分析：洋钱罐全球一体化探索分析平台升级实践</a>
<a class="imdtrap flexRow overflowclass" href="/wz/364657.html" >
瓴岳科技是一家以大数据与人工智能为核心的数字科技集团，旗下拥有国内产品洋钱罐与印尼市场产品 Easy Cash，致力于为全球用户提供卓越的金融科技服务。截至 2025 年，公司已服务全球超 114 家
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-04-16</span></p>
</div>
<a href="/wz/364657.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/364653.html" >
<img src="https://images.jiaoben.net/uploads/20260416/logo_69e03f668f3621.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/364653.html" >python从入门到精通-第8章: 类型系统 — Python的类型注解革命</a>
<a class="imdtrap flexRow overflowclass" href="/wz/364653.html" >
第8章: 类型系统 — Python的类型注解革命 8.1 类型注解基础 Java/Kotlin 对比 Python 实现 核心差异 维度 Java/Kotlin Python 类型检查时机 编译期，
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-04-16</span></p>
</div>
<a href="/wz/364653.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/364652.html" >
<img src="https://images.jiaoben.net/uploads/20260416/logo_69e03f2a9a1801.jpeg" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/364652.html" >第2周 Day 4：英语 Agent Web 版上线：从命令行到浏览器</a>
<a class="imdtrap flexRow overflowclass" href="/wz/364652.html" >
学习目标 把 Week 1 的英语 Agent 整合到 Web 版（搞定！✅） 设计一个好看的前端界面(AI生成的)（搞定！✅） 实现所有功能：今日单词、单词测验、造句练习、编故事（搞定！✅） 加入
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-04-16</span></p>
</div>
<a href="/wz/364652.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
<div class="tj-item ">
<div class="tjitemd">
<div class="tjimd-top flexRow">
<a class="imdta flexRow" href="/wz/364644.html" >
<img src="https://images.jiaoben.net/uploads/20260416/logo_69e03dba5e0d71.webp" >
</a>
<div class="imdt-right flexColumn">
<a class="imdtra flexRow overflowclass" href="/wz/364644.html" >Envira Gallery v1.13.2 汉化版 WordPress高级图库插件</a>
<a class="imdtrap flexRow overflowclass" href="/wz/364644.html" >
Envira Gallery能在几分钟内为网站创建漂亮的响应式照片和视频库，Envira Gallery被誉为响应速度最好的 WordPress 画廊/图库插件。Envira Gallery 主要功能拖放生成器只需单击几下即可轻松创建精美的照片和视频画廊。图库模板使用预先构建的模板来自定义您的画廊的
</a>
</div>
</div>
<div class="tjimd-down flexRow">
<div class="imdd-tab flexRow">
<p class="imddt-time flexRow"><b></b><span>2026-04-16</span></p>
</div>
<a href="/wz/364644.html" class="imdd-more flexRow flexcenter" >立即查看</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cd-right dtlcd-right">
<div class="dtl-ht">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>专题</p></div>
</div>
<div class="dtlht-list ">
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-69351.html" >#数据可视化</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-69351.html" >数据可视化（Data Visu</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="69351" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-69342.html" >#自然语言处理</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-69342.html" >自然语言处理（Natural</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="69342" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-68363.html" >#Excel公式</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-68363.html" >Excel公式就是：用函数 +</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="68363" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-68355.html" >#Excel技巧</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-68355.html" >Excel是日常生活中必不可</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="68355" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-68081.html" >#蛋仔派对</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-68081.html" >蛋仔派对最新官方活动、关卡速</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="68081" >+ 收藏</p>
</div>
<div class="htl-item flexRow">
<div class="htmitem-left">
<div class="htiteml-top flexRow">
<a href="/wz/zt-68000.html" >#人工智能</a>
<span></span>
</div>
<a class="htiteml-down flexRow" href="/wz/zt-68000.html" >人工智能（AI），简单说，就</a>
</div>
<p class="htmitem-right flexRow flexcenter gz" data-id="68000" >+ 收藏</p>
</div>
</div>
</div>
<div class=" dtl-zt">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>最新数据</p></div>
</div>
<div class="wkch-downs">
<div class="weekch-top flexRow">
<a class="wktpa flexRow" href="/wz/325299.html" >
<img src="https://images.jiaoben.net/uploads/20260321/logo_69bd94c35511c1.jpeg" >
</a>
<div class="wktpa-right flexColumn">
<a class="wktpara flexRow overflowclass" href="/wz/325299.html" >Agent 系统详解:从使用到自定义开发</a>
<a class="wktparp flexRow overflowclass" href="/wz/325299.html" >
深入讲解 Claude Cod
</a>
</div>
</div>
<div class="weekch-list">
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325298.html" class="weekcha flexRow flexcenter overflowclass" >聊聊CSS中怎么让auto height支持过渡动画</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325297.html" class="weekcha flexRow flexcenter overflowclass" >Vercel AI SDK 使用指南： 提示词工程 (Prompt Engineering)</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325296.html" class="weekcha flexRow flexcenter overflowclass" >CSS如何修改placeholder的颜色</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325295.html" class="weekcha flexRow flexcenter overflowclass" >Vercel AI SDK 使用指南：图像生成 (Image Generation)</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325291.html" class="weekcha flexRow flexcenter overflowclass" >深入了解CSS中的计数函数</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325290.html" class="weekcha flexRow flexcenter overflowclass" >AI Agent 前端工作流（二）：智能代码审查与自动化测试</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325289.html" class="weekcha flexRow flexcenter overflowclass" >css的盒模型有哪些</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325288.html" class="weekcha flexRow flexcenter overflowclass" ># RAG + LangGraph 实战：4 个工程踩坑，让 AI 从"能用"到"能上线"</a>
</div>
<div class="weekch-con flexRow">
<div class="weekch-icon flexRow"><b></b></div>
<a href="/wz/325287.html" class="weekcha flexRow flexcenter overflowclass" >css怎么设置背景不动</a>
</div>
</div>
</div>
</div>
<div class=" dtl-wz">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>相关文章</p></div>
</div>
<div class="blog-list">
<a href="/wz/364587.html" class="bloga flexRow over"><p class="overflowclass">Python 操作 Word 文档节与页面设置</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364610.html" class="bloga flexRow over"><p class="overflowclass">Python后端开发准则</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364612.html" class="bloga flexRow over"><p class="overflowclass">Python 面向对象编程</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364652.html" class="bloga flexRow over"><p class="overflowclass">第2周 Day 4：英语 Agent Web 版上线：从命令行到浏览器</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364653.html" class="bloga flexRow over"><p class="overflowclass">python从入门到精通-第8章: 类型系统 — Python的类型注解革命</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364657.html" class="bloga flexRow over"><p class="overflowclass">基于 SelectDB 实现 Hive 数据湖统一分析：洋钱罐全球一体化探索分析平台升级实践</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364617.html" class="bloga flexRow over"><p class="overflowclass">使用 Python 压缩 PDF 文件的大小</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364644.html" class="bloga flexRow over"><p class="overflowclass">Envira Gallery v1.13.2 汉化版 WordPress高级图库插件</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364632.html" class="bloga flexRow over"><p class="overflowclass">观测云数据转发和存档最佳实践</p><div class="blogtime"><span>04/</span>16</div></a>
<a href="/wz/364618.html" class="bloga flexRow over"><p class="overflowclass">Python 错误和异常处理</p><div class="blogtime"><span>04/</span>16</div></a>
</div>
</div>
<div class="cdr-ai">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>AI精选 </p></div>
<a class="jbtitle-more flexRow" href="/category/list_344_1.html" title=""><span>更多</span><b></b></a>
</div>
<div class="ai-list">
<div class="ail-top flexRow">
<a href="/wz/365002.html" title="" class="ailta ">
<img src="https://images.jiaoben.net/uploads/20260416/logo_69e09258f3ecd1.png" >
<p ><span>Strict Identity</span></p></a>
<a href="/wz/365001.html" title="" class="ailta ">
<img src="https://images.jiaoben.net/uploads/20260416/logo_69e0924e486491.jpg" >
<p ><span>逼真的斜倚人像，带 Contr</span></p></a>
</div>
<div class="ail-down">
<a class="ali-con flexRow" href="/wz/365000.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">Sabrina Carpenter 舞台表演魅力提示</p>
</a>
<a class="ali-con flexRow" href="/wz/364999.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">电影级人像修复提示词</p>
</a>
<a class="ali-con flexRow" href="/wz/364998.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">金发女郎的镜面自拍</p>
</a>
<a class="ali-con flexRow" href="/wz/364997.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">悉尼·斯威尼 (Sydney Sweeney) 奢华衣橱镜面自拍</p>
</a>
<a class="ali-con flexRow" href="/wz/364987.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">奢华护肤品：香水瓶中的立体模型</p>
</a>
<a class="ali-con flexRow" href="/wz/364986.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">欧洲咖啡馆黄金时段肖像提示</p>
</a>
<a class="ali-con flexRow" href="/wz/364985.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">混凝土表面上的霓虹灯文字</p>
</a>
<a class="ali-con flexRow" href="/wz/364984.html" title="">
<div class="alicon-left flexRow"><span>精选</span></div>
<p class="aliconp overflowclass">电影级写实人像，带微缩克隆体</p>
</a>
</div>
</div>
</div>
<div class="cdr-blog">
<div class="jb-titles flexRow">
<div class="jbtle-left flexRow"><b></b><p>脚本推荐</p></div>
</div>
<div class="blog-list">
<a href="/wz/zt-49225.html" title="" class="bloga flexRow over"><p class="overflowclass">SeeDance 2.0 Video Creator专区</p></a>
<a href="/wz/zt-49224.html" title="" class="bloga flexRow over"><p class="overflowclass">OpenClaw AI专区</p></a>
<a href="/wz/zt-49223.html" title="" class="bloga flexRow over"><p class="overflowclass">cowork专区</p></a>
<a href="/wz/zt-49222.html" title="" class="bloga flexRow over"><p class="overflowclass">claude code skills专区</p></a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
$(function() {
// “+ 收藏”按钮点击事件
$(document).on('click', '.htmitem-right, .ztop-right', function(e) {
// 仅针对包含 “+ 收藏” 文字的按钮
if ($(this).text().indexOf('+ 收藏') === -1) return;
e.preventDefault();
const id = $(this).data('id');
if (!id) {
layer.msg('该项暂无有效ID，无法收藏');
return;
}
// 构造收藏 URL: 当前域名 + /wz/zt- + id + /
const bookmarkUrl = window.location.origin + '/wz/zt-' + id + '.html';
// 获取收藏标题 (优先从同级元素获取话题名称，否则使用页面标题)
let bookmarkTitle = $(this).closest('.htl-item, .zttopd').find('a:first, span.overflowclass').text().trim() || document.title;
if (bookmarkTitle.startsWith('#')) bookmarkTitle = bookmarkTitle.substring(1);
// 浏览器收藏逻辑 (带 Fallback)
try {
if (window.sidebar && window.sidebar.addPanel) {
// Firefox < 23
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, "");
} else if (window.external && ('AddFavorite' in window.external)) {
// IE
window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
} else {
// Chrome, Safari, Firefox 23+, etc.
const isMac = /Mac/i.test(navigator.userAgent);
const keyStr = isMac ? 'Command + D' : 'Ctrl + D';
layer.confirm('由于浏览器安全限制，请使用 <b>' + keyStr + '</b> 手动添加收藏。<br><br>收藏地址：<br><small>' + bookmarkUrl + '</small>', {
title: '收藏提示',
btn: ['复制链接', '知道了'],
yes: function(index) {
copyToClipboard(bookmarkUrl).then(() => {
layer.msg('链接已复制，请手动添加到收藏夹');
}).catch(() => {
layer.msg('复制失败，请手动选择复制');
});
layer.close(index);
}
});
}
} catch (err) {
layer.msg('收藏失败，请手动添加');
}
});
// 兼容非 HTTPS 的复制函数
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
} else {
let textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}
});
</script>
<footer>
<div class="foot ">
<div class="foot-top flexRow">
<div class="foot-left">
<div class="ftl-top flexRow"><span class="flexRow flexcenter">脚本</span>在线</div>
<p class="ftl-down">
智能赋能梦想，脚本构筑现实。我们致力于链接AI智能指令
与传统自动化，为您提供一站式、高效率的脚 本资产与生成
服务。
</p>
</div>
<div class="foot-right flexRow">
<div class="ftr-list flexColumn">
<p>核心板块</p>
<span>AI脚本库</span>
<span>自动化仓库</span>
<span>脚本实验室</span>
</div>
<div class="ftr-list flexColumn">
<p>关于我们</p>
<a href="/category/list_229_1.html" >最新游戏</a>
<span>商务合作</span>
<span>隐私政策</span>
</div>
<div class="ftr-list flexColumn">
<p>社区支持</p>
<span >API文档</span>
<a href="/category/list_334_1.html" >攻略资讯</a>
<span>违规举报</span>
</div>
</div>
</div>
<div class="foot-down flexColumn">
<p>© 2026 jiaoben.net | 脚本在线 | 联系：jiaobennet2026@163.com</p>
<p>备案：<a style="color: #7F7F7F;" href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备18025217号-11</a> </p>
</div>
</div>
</footer>
<div style="display:none;">
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//tongji.zhangwan.net/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '29']);
// Add this code below within the Matomo JavaScript tracker code
// Important: the tracker url includes the /matomo.php
var secondaryTrackerUrl = u+'matomo.php';
var secondaryWebsiteId = 27;
// Also send all of the tracking data to this other Matomo server, in website ID 77
_paq.push(['addTracker', secondaryTrackerUrl, secondaryWebsiteId]);
// That's it!
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5d3cfe1f36b1988029fe82a0d475b20d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div> </body>
</html>
这是一个标准行高的段落。
这是一个标准行高的段落。
这是一个标准行高的段落。这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
设置行高。在