一、什么是块级元素与行内元素？

在CSS视觉格式化模型中，HTML元素默认被分为两大类型：块级元素（Block-level Elements）和行内元素（Inline Elements）。这种分类决定了元素如何在页面上布局和表现。

二、常见块级元素大全

基础结构元素

• - 通用容器

• - 段落

• 
  

  -

  - 标题层级

列表相关

• ,
  - 无序/有序列表
  2. - 列表项

  3. - 定义列表

  4. ,

     - 定义术语/描述

  布局元素

  • 

    ,

  • 

    ,

    - 内容区块
  • 

  • 

  • - 主体内容
  • 


    ,

  表格元素

  • 
    - 表格
    

    - 表格行

    ,

    - 单元格/表头 其他 - 表单 - 预格式化文本 - 块引用 - 水平分割线 三、常见行内元素大全 文本相关 - 通用行内容器 - 超链接 , - 加粗强调 , - 斜体强调 - 代码片段 - 换行 多媒体元素 - 图像 , - 视频/音频 - 画布 表单元素 - 输入框 - 按钮 - 标签 , - 下拉选项 </code> - 多行文本</li></ul><h4>其他</h4><ul><li><code><sup></code>, <code><sub></code> - 上标/下标</li><li><code><small></code> - 小号文本</li><li><code></code> - 时间日期</li><li><code></code> - 进度条</li></ul><h3>四、核心区别对比表</h3><thead><th>特性</th><th>块级元素</th><th>行内元素</th></thead><tbody><td><strong>默认显示</strong></td><td>独占一行</td><td>与其他行内元素共处一行</td><td><strong>尺寸属性</strong></td><td>可设置width/height</td><td>设置无效，由内容决定</td><td><strong>边距</strong></td><td>四个方向都有效</td><td>仅水平方向有效</td><td><strong>包含关系</strong></td><td>可包含块级和行内元素</td><td>通常只包含文本和其他行内元素</td><td><strong>默认宽度</strong></td><td>父元素宽度的100%</td><td>刚好包裹内容</td><td><strong>排列方式</strong></td><td>垂直堆叠</td><td>水平排列</td><td><strong>典型代表</strong></td><td><code><div></code>, <code><p></code>, <code><h1></code></td><td><code><span></code>, <code><a></code>, <code><img></code></td></tbody><h3>五、display属性改变元素类型</h3><p>通过CSS的display属性可以改变元素的默认表现：</p><pre><code class="prism language-css"><span class="token comment">/* 将行内元素转为块级 */</span><span class="token selector">span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/* 将块级元素转为行内 */</span><span class="token selector">div</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/* 行内块元素 - 兼具两者特性 */</span><span class="token selector">a</span> <span class="token punctuation">{<!-- --></span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre> <h4>特殊display值：</h4> <ul> <li><code>inline-block</code>：行内显示但可设置宽高</li> <li><code>flex</code>/<code>grid</code>：创建弹性/网格布局</li> <li><code>none</code>：完全隐藏元素</li> </ul> <h3>六、实际开发中的注意事项</h3> <ol> <li> <p><strong>嵌套规则</strong>：</p> <ul> <li>行内元素通常不应包含块级元素（某些元素如<code><a></code>在HTML5中可以包含块级元素）</li> <li><code> <p></code>标签不能嵌套其他块级元素</li> </ul> </li> <li> <p><strong>边距问题</strong>：</p> <pre><code class="prism language-css"><span class="token comment">/* 行内元素的垂直margin无效 */</span><span class="token selector">span</span> <span class="token punctuation">{<!-- --></span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/* 不会生效 */</span><span class="token punctuation">}</span></code></pre> </li> <li> <p><strong>空白间隙</strong>：</p> <pre><code class="prism language-html"><span class="token comment"><!-- 行内元素间的换行会产生空白间隙 --></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 这里有约4px的间隙 --></span></code></pre> </li> <li> <p><strong>现代布局影响</strong>：<br />Flexbox和Grid布局会创建新的格式化上下文，使子元素的display特性发生变化</p> </li> </ol> <h3>七、如何选择合适的元素类型？</h3> <ol> <li> <p><strong>使用块级元素当</strong>：</p> <ul> <li>需要独占一行时</li> <li>需要控制宽度高度时</li> <li>构建页面主要结构时</li> </ul> </li> <li> <p><strong>使用行内元素当</strong>：</p> <ul> <li>需要在一行内显示多个元素时</li> <li>修饰文本内容时</li> <li>不需要控制精确尺寸时</li> </ul> </li> <li> <p><strong>使用inline-block当</strong>：</p> <ul> <li>需要水平排列但又要控制尺寸时</li> <li>创建导航菜单等项目时</li> </ul> </li> </ol> <h3>八、HTML5带来的变化</h3> <p>HTML5引入了更多语义化元素，但它们的默认display值大多是块级：</p> <ul> <li><code><br /> <section></code>, <code></p> <article></code>, <code></p> <nav></code>等默认都是<code>display: block</code></li> <li>新增的行内语义元素如<code><mark></code>, <code></code>保持行内特性</li> </ul> <h3>结语</h3> <p>理解块级元素和行内元素的区别是CSS布局的基础。随着现代布局技术（Flexbox/Grid）的发展，这种分类的重要性有所降低，但在处理文本流、表单元素和浏览器默认样式时，这些基础知识仍然至关重要。掌握它们能帮助开发者避免常见的布局问题，写出更健壮的CSS代码。</p> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="http://www.csdndoc.com/tag/ys" rel="tag">元素</a> <a href="http://www.csdndoc.com/tag/bj-2" rel="tag">布局</a> <a href="http://www.csdndoc.com/tag/wb" rel="tag">文本</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <br> <a href="http://www.csdndoc.com/thread/23874.html" rel="prev">css 发射烟花的动画</a> </div> <div class="post-next twofifth"> 下一篇 <br> <a href="http://www.csdndoc.com/thread/23876.html" rel="next">css初学者第三天</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="http://www.pcgg.com.cn/xsdgm/52676.html">消逝的光芒怎么剪衣服</a></li> <li><a href="http://www.pcgg.com.cn/cf/36086.html">cf海军陆战队角色特点</a></li> <li><a href="http://www.pcgg.com.cn/lol/13894.html">lol手游英雄排名定位怎么改</a></li> <li><a href="http://www.pcgg.com.cn/lol/26075.html">英雄联盟怎么找客服解封</a></li> <li><a href="http://www.pcgg.com.cn/lol/16322.html">lol地图和dota地图哪个大</a></li> <li><a href="http://www.pcgg.com.cn/cj/39154.html">老北京过年去哪里</a></li> <li><a href="http://www.pcgg.com.cn/lol/29080.html">手游lol是网易游戏吗</a></li> <li><a href="http://www.pcgg.com.cn/gl/3224.html">原神小六在哪</a></li> <li><a href="http://www.pcgg.com.cn/zzhx/53141.html">最终幻想玛祖卡尾刀技能</a></li> <li><a href="http://www.pcgg.com.cn/wzlb/53700.html">天津市长荣印刷设备有限公司（李莉-天津长荣印刷设备股份有限公司总经理介绍）</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="http://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br /> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="http://www.pcgg.com.cn/lol/23834.html">为什么lol放一个技能卡一下</a></li> <li><a href="http://www.pcgg.com.cn/cf/35175.html">cf下载总是弹出乱码</a></li> <li><a href="http://www.pcgg.com.cn/lol/19203.html">英雄联盟鼠标怎么用</a></li> <li><a href="http://www.pcgg.com.cn/lol/21872.html">英雄联盟值得玩吗</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/5714.html">和平精英体验服抢号在哪里抢</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/6603.html">和平精英灵敏度设置最佳(和平精英灵敏度最佳设置推荐)</a></li> <li><a href="http://www.pcgg.com.cn/lol/25849.html">英雄联盟成就6代币怎么解锁</a></li> <li><a href="http://www.pcgg.com.cn/lol/20302.html">lol世界赛用的什么语言</a></li> <li><a href="http://www.pcgg.com.cn/gl/1795.html">原神2.5版本送多少原石</a></li> <li><a href="http://www.pcgg.com.cn/lol/22929.html">英雄联盟怎么查最近登陆</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> <p> Copyright © 2012 - 2025 <a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a> </p> <p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p> <p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p> </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div> <!--gototop--> <div id="tbox"> <a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a> <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>