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

Question

我正在查看 Airbnb 移动应用程序版本的代码（通过检查员模式）。 带有红色标记的额外像素的屏幕截图 如屏幕截图所示，图像、图像标题（“在线体验”）和描述（“独特的活动...主机。”）中添加了额外的像素。 我不是编码员，所以也许我没有正确理解它。 从开发的角度来看，有人可以解释为什么以这种方式定义蓝色块吗？

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

Answer 1

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

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

理想情况下，图片可以同时实现min-height和width: 100% css 规则，但是由于图片的宽度与屏幕宽度相比相对较大，浏览器无法实现width: 100%规则，这就是如何你看到了结果。