组件旁边添加了额外的像素（Airbnb 移动应用程序）？

Question

我正在查看 Airbnb 移动应用版本的代码（通过检查器模式）。Screenshot with extra pixel indicated in red marker 如屏幕截图所示，图像、图像标题（“在线体验”）和描述（“独特的活动......主持人。”）。我不是编码员，所以也许我没有正确理解它。从开发的角度来看，有人可以解释为什么以这种方式定义蓝色块吗？

从 UX/UI 的角度来看，设计师通常会定义填充（绿色块），但不要认为这些额外的像素（用红色标记表示）是设计师定义的。

Answer 1

如果您查看蓝色框的边距，您会看到它居中，右侧的边距与左侧的大小相同。所以那个div框的响应是正确的。

我认为“额外像素”部分是因为图片不适合您的屏幕，并且图片的属性设置为保持其 xy 边比，另外我认为有一个 min-height 和一个 width: 100% 属性那张照片。

理想情况下图片可以同时完成min-height和width: 100%的css规则，但是由于图片的宽度相对于你的屏幕宽度来说比较大，浏览器无法完成width: 100%规则，这是你怎么看结果。