设置为display:inline的<li>元素仍存在宽高问题成因求助

核心冲突点：float属性会覆盖display:inline的表现 #

CSS规范明确规定：为元素设置float: left或float: right后，元素的实际显示类型会被强制调整为块级框，你设置的display: inline会被浏览器直接忽略。此时<li>本质是浮动的块级元素，天然支持宽高识别，padding、margin也能正常生效，自然会表现出明确的宽高。

次要影响因素：内部内容自带固有尺寸 #

<li>内部包含<img>替换元素，这类元素本身自带HTML属性定义的宽高，哪怕你没有给<li>显式设置宽高，<li>的尺寸也会被内部的图片内容自动撑开，加上你给<li>设置了padding: 10px，最终的宽高就是图片尺寸加padding的数值，进一步放大了这个现象。

你可以删除<li>样式中的float: left;属性，就能看到<li>立刻恢复正常行内元素表现：无法自定义宽高，仅由内容决定横向占据空间，上下padding不会影响整体行高。

• 如果需要元素同时满足横向排列、可自定义宽高的需求，优先使用display: inline-block，不要混用display: inline和浮动属性，避免出现预期外的表现。
• 浮动属性会触发元素BFC（块级格式化上下文），同时强制修改元素的display计算值，使用浮动布局时要注意和其他display属性的冲突。日常开发优先使用flex、grid等现代布局方案替代传统浮动布局，可以大幅减少这类样式冲突问题。

内容的提问来源于stack exchange，提问作者Mysa Mysa