CSS中display:inline 和 inline-block的区别

首先看看来自chatgpt的回答:

inlineinline-block 是两种 CSS 属性值,它们都用于控制元素在水平方向上排列,并与文本流中的其他元素一起显示。它们之间的主要区别在于如何处理元素的宽度和高度以及如何与其他元素排列。

  1. inline

    • inline 元素会像文本一样在一行内排列,不会独占一行,只占据其内容所需的水平空间。
    • inline 元素的宽度和高度由其内容决定,不可以设置固定的宽度和高度。
    • inline 元素的 marginpadding 对左右方向有效,但不对上下方向有效。
    • inline 元素与相邻的元素之间可能存在一些默认的水平间距,这通常由字母间距和换行符等因素引起。
  2. inline-block

    • inline-block 元素也会在一行内排列,但与 inline 不同的是,它可以设置固定的宽度和高度。
    • inline-block 元素的宽度和高度可以通过 CSS 明确指定,因此具有更多的布局自由度。
    • inline-block 元素的 marginpadding 对所有方向都有效,包括上下方向。
    • inline-block 元素之间的默认水平间距通常较小,且可以通过调整 font-sizeletter-spacing 来消除。

总结来说,inline 适用于需要元素在一行内显示,并且宽度和高度由内容决定的情况,而 inline-block 更适合需要元素在一行内显示,但又希望具有更精确控制宽度、高度以及上下间距的情况。根据具体的布局需求和设计目标,可以选择使用其中之一。

总结:二者都是让元素能够在同一行显示,区别在于:

**   inline: 不能设置宽高和间距,只能由元素内容自动撑开**

适用场景:让块级元素同一行显示: 比如ul标签

**inline-block: 可以对行内元素设置宽高和间距,**比如a标签

相关推荐
KaMeidebaby6 分钟前
卡梅德生物技术快报|抗体合成:多肽抗体合成工程化方案:Nsp2 保守肽多抗制备与多维度验证
前端·网络·数据库·人工智能·算法
青禾网络12 分钟前
前端做音画匹配这件事,我从"随机塞"到"AI 自动对齐"
前端·github
2601_963771371 小时前
Hardening Enterprise WordPress Sites Against REST API Leaks and Bad Headers
前端·windows·word·php
蓝银草同学1 小时前
Stream 实战:博客列表排序、过滤与分页(AI 辅助学习 Java 8)
java·前端·后端
2601_957190901 小时前
飞行影院安装施工指南:场地、动感系统与影片内容配套
大数据·前端·人工智能
爱折腾的小黑牛1 小时前
简记往来批量录入功能的实现:从文本到结构化数据
前端·算法
YHHLAI2 小时前
Agent 智能体开发实战 · 第六课:MCP 协议 —— 让 Agent 跨进程调用工具
前端·人工智能
SmartBoyW2 小时前
前端死磕:一文彻底搞懂 JS 事件循环 (Event Loop) 与宏微任务
前端·javascript
爱勇宝2 小时前
3位工程师靠“删AI代码”创业,一周收费1万美元:以后最贵的能力,可能不是写代码
前端·后端·架构
Curvatureflight2 小时前
客户端日志上报怎么设计?让线上问题不再只靠用户截图
前端·系统架构