inline什么意思:字面为嵌入行内,在网页CSS里代表行内布局,元素不会自动换行,和前后内容排在同一行,宽度仅适配自身内容,默认无法自定义宽高;只适用于文本修饰类标签,大块布局容器不适合设置为inline,强行设置会造成样式错乱。
inline通用词义
inline作形容词,指内容嵌入主行文、不单独另起段落。
文字排版里,inline引用就是文内夹注,区别于脚注、尾注。
inline在前端CSS中的核心用法
display:inline是最常用写法,对应行内元素。
| 属性值 | 换行规则 | 宽高设置 | 适用场景 |
|---|---|---|---|
| inline | 同行排列,空间不足才换行 | 不能自定义宽高,尺寸跟随文字内容 | 文字链接、文字加粗、行内小图标 |
| block | 自动独占一整行 | 可以自由设置宽高、内外边距 | 段落、大容器、整体区块布局 |
| inline-block | 同行排列 | 既能同行显示,又能自定义宽高 | 横向排列的按钮、图文卡片 |
依据MDNWebDocs网页布局规范,inline元素仅能包裹文本与其他行内标签,不能嵌套块级div容器,嵌套后会自动被浏览器拆分结构。
使用边界限制
如果你需要给元素设置高度、上下外边距,不要使用inline,优先选择inline-block。
纯文本排版场景下,inline可以正常使用;页面整体布局如果全部用inline,容易出现文字错位、空隙异常等问题。