首页 > 网页制作 >HTML行内元素与块级元素有哪些及区别详解

HTML行内元素与块级元素有哪些及区别详解

来源：互联网 2026-04-08 13:49:03

面试常考题：行内元素与块级元素的区别在前端工作面试中，面试官常常会问到一个基础问题：HTML的行内元素有哪些，它们与块级元素有什么区别？这个问题看似简单，却很多初学者因为只关注标签语义而忽视了其核心的显示特性，导致回答时难以给出完整答案。常见的行内元素有哪些典型的行内元素包括链接标签、图片标签

面试常考题：行内元素与块级元素的区别

在前端工作面试中，面试官常常会问到一个基础问题：HTML的行内元素有哪些，它们与块级元素有什么区别？这个问题看似简单，却很多初学者因为只关注标签语义而忽视了其核心的显示特性，导致回答时难以给出完整答案。

常见的行内元素有哪些

典型的行内元素包括链接标签、图片标签、表单控件如、</code>、<code><select></code>和<code><label></code>，以及常用的文本容器<code><span></code>。</p> <p>此外，用于文本格式化的也多是行内元素，例如换行标签<code><br></code>、加粗标签<code><b></code>和<code><strong></code>、上下标标签<code><sup></code>和<code><sub></code>、斜体标签<code><i></code>和<code><em></code>，以及删除线<code><del></code>、下划线<code><u></code>等。</p> <p>如果面试时只能列举出<code><a></code>和<code><img></code>，就可能给面试官留下基础知识不扎实的印象。</p> <h3>常见的块级元素有哪些</h3> <p>常见的块级元素有通用容器<code><div></code>、表格<code><table></code>、表单<code><form></code>、段落<code><p></code>、列表<code><ul></code>和<code><ol></code>、各级标题<code><h1></code>至<code><h6></code>、水平线<code><hr></code>、预格式化文本<code><pre></code>、地址<code><address></code>，还有一些已不常用的如<code><center></code>、<code><marquee></code>和引用块<code><blockquote></code>等。</p> <p>仅仅回答<code><div></code>是远远不够的。</p> <h3>行内元素与块级元素的核心区别</h3> <h4>块级元素的特点</h4> <p>块级元素的布局行为非常鲜明：</p> <p>1. 独占一行：默认从新行开始，每个块级元素垂直向下排列，独占一整行空间。</p> <p>2. 尺寸可控：可以自由设置其宽度、高度、外边距和内边距，且设置立即生效。</p> <p>3. 宽度默认占满：若不指定宽度，块级元素会自动撑满其父容器的全部宽度。</p> <p>4. 包容性强：块级元素内部可以包含其他块级元素，也可以包含行内元素，布局灵活。</p> <h4>行内元素的特点</h4> <p>行内元素的特性则有所不同：</p> <p>1. 同行排列：默认与其他行内元素在同一行内水平排列，直到空间不足才会换行。</p> <p>2. 尺寸由内容决定：其宽度和高度由所含内容决定，手动设置的宽高值通常无效。这是一个关键区别。</p> <p>3. 边距设置部分生效：左右方向的外边距和内边距设置有效；而上下方向的外边距和内边距虽然在盒模型中存在，会实际增大元素背景区域，但<strong>不会推开周围的行内元素</strong>，因此视觉上不会产生上下间距效果，这点常常令初学者困惑。</p> <p>下面这段简单的代码可以直观展示行内元素的padding效果：</p> <pre class="brush:xhtml;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <style> p{border:1px solid red;padding:10px;} div{border:1px solid blue;} </style> <body> <div>块级元素</div> <p> 行内元素</p> <p> 行内元素</p> <div>块级元素</div> </body> </html></pre> <p style="text-align: center"><img src="https://img.xiayx.com/uploadfile/news/20260408/86d8e68b14ccfa0db6f16ba7c56ef880.webp" alt="HTML行内元素与块级元素有哪些及区别详解"title="HTML行内元素与块级元素有哪些及区别详解"></p> <p>4. 内容规范：按照语义化规范，行内元素内通常应只包含其他行内元素或纯文本，不建议包含块级元素，以符合文档流的预期。</p> <h3>使用CSS进行元素类型转换</h3> <p>行内与块级的特性并非固定不变。通过CSS的<code>display</code>属性，我们可以实现它们之间的灵活转换：</p> <p> (1) <code>display: inline;</code> 可将元素设置为行内元素；</p> <p> (2) <code>display: block;</code> 可将元素设置为块级元素；</p> <p> (3) <code>display: inline-block;</code> 可将元素设置为行内块状元素。</p> <h3>行内块状元素的独特优势</h3> <p>行内块状元素融合了两种元素的优点：</p> <p>(1) 它像行内元素一样，不会自动换行，能与同行元素水平排列；</p> <p>(2) 它又像块级元素一样，可以自由设置宽度、高度以及各个方向的内外边距；</p> <p>(3) 默认的排列方向为从左到右。</p> <p><code>inline-block</code>因此成为兼顾流式布局与精确控制的实用工具，在现代网页开发中应用十分广泛。</p> </div> <div class="mnxDqzcMsg"> <b></b> <p>侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述</p> <div class="clear"></div> </div> </div>   <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>相关攻略</h2> <em><a href="/zhuanti/zx_" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <div class="mnxZxtjBox"> <ul class="mnxZxglList"> <li> <a href="/article/685274/" title="轻颜相机app有无会员才能用？" class="aBlack">轻颜相机app有无会员才能用？</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/684517/" title="阿里云盘网页版直达入口" class="aBlack">阿里云盘网页版直达入口</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/684516/" title="慕课网app如何绑定邮箱" class="aBlack">慕课网app如何绑定邮箱</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/684513/" title="雨果跨境app如何找供应商" class="aBlack">雨果跨境app如何找供应商</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/684509/" title="华硕路由器恢复出厂后光猫连不上了？" class="aBlack">华硕路由器恢复出厂后光猫连不上了？</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/684508/" title="3d打印机离线打印需要电脑吗" class="aBlack">3d打印机离线打印需要电脑吗</a> <span></span> <div class="clear"></div> </li> </ul> </div> </div> <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>同类更新</h2> <em><a href="/newslist/918_1.html" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxSplbList"> <li> <span> <a href="/article/691098/" title="王者荣耀世界铠+伽罗配队玩法攻略"><img src="https://img.xiayx.com/uploadfile/news/20260410/e2861e1e88c5a22985ce4d21df219f1f.webp" alt="王者荣耀世界铠+伽罗配队玩法攻略" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/691098/" title="王者荣耀世界铠+伽罗配队玩法攻略" class="aBlack">王者荣耀世界铠+伽罗配队玩法攻略</a></dt> </dl> </li> <li> <span> <a href="/article/691097/" title="王者荣耀世界撼地狂木BOSS位置及打法撼地狂木怎么打"><img src="https://img.xiayx.com/uploadfile/news/20260410/6f59ca162890f2bb8a8e2fbf8509bb82.webp" alt="王者荣耀世界撼地狂木BOSS位置及打法撼地狂木怎么打" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/691097/" title="王者荣耀世界撼地狂木BOSS位置及打法撼地狂木怎么打" class="aBlack">王者荣耀世界撼地狂木BOSS位置及打法撼地狂木怎么打</a></dt> </dl> </li> <li> <span> <a href="/article/691096/" title="王者荣耀世界青钺铸将BOSS位置及打法青钺铸将怎么打"><img src="https://img.xiayx.com/uploadfile/news/20260410/164cd9cf0916970bb1d9ff05765d856e.webp" alt="王者荣耀世界青钺铸将BOSS位置及打法青钺铸将怎么打" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/691096/" title="王者荣耀世界青钺铸将BOSS位置及打法青钺铸将怎么打" class="aBlack">王者荣耀世界青钺铸将BOSS位置及打法青钺铸将怎么打</a></dt> </dl> </li> <li> <span> <a href="/article/691095/" title="王者荣耀世界元歌傀儡BOSS位置及打法元歌傀儡怎么打"><img src="https://img.xiayx.com/uploadfile/news/20260410/0d1fca7e22eb3d68e2f25607befc89e7.webp" alt="王者荣耀世界元歌傀儡BOSS位置及打法元歌傀儡怎么打" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/691095/" title="王者荣耀世界元歌傀儡BOSS位置及打法元歌傀儡怎么打" class="aBlack">王者荣耀世界元歌傀儡BOSS位置及打法元歌傀儡怎么打</a></dt> </dl> </li> <li> <span> <a href="/article/691094/" title="《燕云十六声》开封皇宫全收集攻略分享"><img src="https://img.xiayx.com/uploadfile/news/20260410/d077a90e1e3d4ef9945f09e3010b4655.webp" alt="《燕云十六声》开封皇宫全收集攻略分享" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/691094/" title="《燕云十六声》开封皇宫全收集攻略分享" class="aBlack">《燕云十六声》开封皇宫全收集攻略分享</a></dt> </dl> </li> <li> <span> <a href="/article/691093/" title="王者荣耀世界元流之子+西施队连招攻略前期配队推荐"><img src="https://img.xiayx.com/uploadfile/news/20260410/76994d2e201f91e72a2d65a5e57dc27a.webp" alt="王者荣耀世界元流之子+西施队连招攻略前期配队推荐" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/691093/" title="王者荣耀世界元流之子+西施队连招攻略前期配队推荐" class="aBlack">王者荣耀世界元流之子+西施队连招攻略前期配队推荐</a></dt> </dl> </li> <div class="clear"></div> </ul> </div> <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>热游推荐</h2> <em><a href="/sy/" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxSyyxList"> <li> <span><a href="/xiazai/902144339.html" title="航天火箭模拟器"><img src="https://img.xiayx.com/uploadfile/soft/202604/07/a4884e4360820a4aaa906dbb10c651bc.webp" alt="航天火箭模拟器" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144339.html" title="航天火箭模拟器" class="aBlack">航天火箭模拟器</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/871_1/" title="模拟养成" class="bBlack">模拟养成</a></dd> <dd>2026-04-07</dd> </dl> <em><a href="/xiazai/902144339.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144338.html" title="命运骑士团"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/816baec00a69d59547330bdae71a54d4.webp" alt="命运骑士团" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144338.html" title="命运骑士团" class="aBlack">命运骑士团</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/873_1/" title="角色扮演" class="bBlack">角色扮演</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144338.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144337.html" title="龙武手游"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/71854dc251ea57a0e981aa843ceba182.webp" alt="龙武手游" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144337.html" title="龙武手游" class="aBlack">龙武手游</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/873_1/" title="角色扮演" class="bBlack">角色扮演</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144337.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144336.html" title="小富婆"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/890cc5595a3d5d11db5b3b4820ccff17.webp" alt="小富婆" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144336.html" title="小富婆" class="aBlack">小富婆</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/871_1/" title="模拟养成" class="bBlack">模拟养成</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144336.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144335.html" title="森林王国"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/05a82f9995527c509fa00768bec613a6.webp" alt="森林王国" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144335.html" title="森林王国" class="aBlack">森林王国</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/873_1/" title="角色扮演" class="bBlack">角色扮演</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144335.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144334.html" title="奇幻祖玛"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/1bf1e0ce838d4502fa58c0db96200cb5.webp" alt="奇幻祖玛" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144334.html" title="奇幻祖玛" class="aBlack">奇幻祖玛</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/869_1/" title="休闲益智" class="bBlack">休闲益智</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144334.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144333.html" title="坠星大陆买断版"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/08328934e4985d8c3cd97939823459ec.webp" alt="坠星大陆买断版" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144333.html" title="坠星大陆买断版" class="aBlack">坠星大陆买断版</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/873_1/" title="角色扮演" class="bBlack">角色扮演</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144333.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144332.html" title="战神烈歌"><img src="https://img.xiayx.com/uploadfile/soft/202603/30/2cc7984a5e37b3db5bef7001ea4460e3.webp" alt="战神烈歌" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144332.html" title="战神烈歌" class="aBlack">战神烈歌</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/873_1/" title="角色扮演" class="bBlack">角色扮演</a></dd> <dd>2026-03-30</dd> </dl> <em><a href="/xiazai/902144332.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> </ul> </div> <div class="mnxDqzcBox2"> <div class="mnxPhbTitle"> <b></b> <h2>精彩专题</h2> <em><a href="/zhuanti/bb_1/" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxJcztList"> <li> <a href="/zhuanti/413355/" title="西行纪燃魂" class="aWhite"> <img src="/upload/20230719/1689738250221254.jpg" alt="西行纪燃魂" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>西行纪燃魂</span> </a> </li> <li> <a href="/zhuanti/404232/" title="代号鸢" class="aWhite"> <img src="/upload/20230516/168420084782584.jpg" alt="代号鸢" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>代号鸢</span> </a> </li> <li> <a href="/zhuanti/399692/" title="诺亚挽歌" class="aWhite"> <img src="/upload/20230516/1684201580678360.png" alt="诺亚挽歌" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>诺亚挽歌</span> </a> </li> <li> <a href="/zhuanti/396555/" title="都是人情世故" class="aWhite"> <img src="/upload/20230428/1682647396684343.jpg" alt="都是人情世故" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>都是人情世故</span> </a> </li> <li> <a href="/zhuanti/395653/" title="小狗咖啡馆" class="aWhite"> <img src="/upload/20230424/1682306724469761.png" alt="小狗咖啡馆" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>小狗咖啡馆</span> </a> </li> <li> <a href="/zhuanti/392868/" title="迷你枪战精英" class="aWhite"> <img src="/upload/20230505/1683249663805458.jpg" alt="迷你枪战精英" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>迷你枪战精英</span> </a> </li> <div class="clear"></div> </ul> </div> </div>   <div class="mnxFoot"> <div class="mnxFootMenu"> <div class="mnxFootMenuIn"> <a href="/game/988_1/" title="手游">手游</a> <a href="/zhuanti/bb_1" title="专题">专题</a> <a href="/newslist/825_1.html" title="攻略">攻略</a> <a href="/xiazai/938_1/" title="App下载">App下载</a> <a href="/newslist/1004_1.html" style="color:#303133;">web3</a> <div class="clear"></div> </div> </div> <div class="mnxFootFan"> <div class="mnxFootFanIn"> <a href="/" title="返回首页">返回首页</a> <a href="#" title="回到顶部">回到顶部</a> <div class="clear"></div> </div> </div> <div class="mnxFootMsg"> <dl> <dt>湘ICP备14008430号-1 湘公网安备 43070302000280号</dt> <dd>All Rights Reserved </dd> </dl> <dl> <dt>本站为非盈利网站，不接受任何广告。本站所有软件，都由网友</dt> <dd>上传，如有侵犯你的版权，请发邮件给xiayx666@163.com</dd> </dl> <dl> <dt>抵制不良色情、反动、暴力游戏。注意自我保护，谨防受骗上当。</dt> <dd>适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</dd> </dl> </div> </div> <script src="https://m.xiayx.com/js/jumbpc.js?1775852657" type="text/javascript"></script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?075ab887d0dd167df1a8b41de83e8c61"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  </div> </body> </html>