可通过css的display属性将行内元素转为块级显示：设为block可独占一行并支持宽高；inline-block保持行内流但支持尺寸控制；table使元素类似块容器；flex和grid则分别启用弹性布局与网格布局能力。
如果您在HTML中使用了行内元素（如、、等），但希望它们以块级方式显示，即独占一行并支持宽高设置，则需要通过CSS改变其display属性。以下是实现此效果的多种方法：
一、使用CSS display属性设置为block
通过将元素的display值设为block，可强制行内元素以块级方式渲染，使其独占一行并接受width、height、margin、padding等块级样式控制。
1、在HTML中为需要转换的行内元素添加class属性，例如：示例文字
2、在
立即学习“前端免费学习笔记（深入）”；
3、.block-text { display: block; }
4、保存后刷新页面，该元素将表现为块级元素。
二、使用CSS display属性设置为inline-block
inline-block可在保持行内布局特性的同时，赋予元素块级盒模型能力，适用于需横向排列但又需设置尺寸和垂直对齐的场景。
1、为元素添加class，例如：链接文本
2、在CSS中定义：
3、.ib-link { display: inline-block; width: 120px; height: 36px; line-height: 36px; text-align: center; }
4、该链接将保留行内流位置，但可精确控制宽高与内部垂直居中。
三、使用CSS display属性设置为table
将行内元素设为display: table，可使其表现类似块级块容器，同时自动包裹内容并支持margin、width等属性，且具备表格相关行为基础。
1、为目标元素添加class，例如：加粗文字
2、在CSS中声明：
3、.table-strong { display: table; margin: 10px auto; width: fit-content; }
4、该元素将脱离行内流，以独立块形式居中显示，并根据内容宽度自适应。
四、使用CSS display属性设置为flex
设置display: flex可使元素成为弹性容器，即使原为行内元素，也将以块级方式参与文档流，并获得完整的Flexbox布局能力。
1、为元素添加class，例如：斜体文字
2、在CSS中定义：
3、.flex-em { display: flex; justify-content: center; align-items: center; height: 40px; background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf0f0f0; }
4、该元素将占据整行可用宽度（默认stretch），并支持内部子项对齐控制。
五、使用CSS display属性设置为grid
将行内元素设为display: grid，可使其成为网格容器，从而以块级方式渲染，并启用二维布局能力，适合复杂结构嵌套需求。
1、为元素添加class，例如：斜体符号
2、在CSS中编写：
3、.grid-i { display: grid; place-items: center; width: 80px; height: 80px; background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beef9ff; border-radius: 4px; }
4、该元素将脱离行内流，作为独立网格容器居中渲染，背景色与圆角生效。
