display属性通过修改值切换元素显示模式：inline使块级元素同行排列但禁用宽高和上下边距；block使行内元素独占一行并支持全部盒模型属性；inline-block兼顾同行与尺寸控制，需处理空格缝隙；flex、grid启用现代布局，none彻底隐藏元素。

用 display 属性切换元素的显示模式，核心就是改它的值——不需要改 HTML 标签本身，纯靠 CSS 控制。

把块级元素变成行内元素

比如 <div> 默认是块级，想让它和其他内容排在同一行，就设 <code>display: inline：

• 多个 div 设置后会并排显示，像文字一样从左往右流动
• 此时不能设置 width/height、上下 margin/padding 失效（只左右起作用）
• 适合用于需要“不换行但又不想用 span”的场景，比如导航链接用 div 写完再统一 inline 化

把行内元素变成块级元素

像 <a></a> 或 <span></span> 默认是行内，想让它独占一行、能设高宽，就写 display: block：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• a 设了 block 后，就能加 height、margin-top、padding-bottom 等所有块级特性
• 常用于按钮类链接、标题前的图标等需要结构化控制的场合
• 注意：它会自动换行，前后产生空白间隙，可能影响布局节奏

更实用的选择：inline-block

如果既要同行排列，又要能设宽高和上下边距，display: inline-block 是折中方案：

• div、p、li 都可以加这个值，立刻获得“可设尺寸 + 不换行”能力
• 垂直对齐默认按 baseline，可用 vertical-align: top/middle/bottom 调整
• 注意空格问题：HTML 中换行或空格会被渲染成一个空白字符，导致元素间有小缝隙，可用 font-size: 0 或注释删空格来规避

其他常用 display 值补充

除了切换块/行内，display 还支持现代布局方式：

• flex：让父容器启用弹性布局，子项自动按 flex 规则排列
• grid：启用网格系统，适合复杂二维布局
• none：彻底隐藏元素，不占文档流位置（区别于 visibility: hidden）