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

Question

I was looking at codes(via inspector mode)for the at the Airbnb mobile app version. Screenshot with extra pixel indicated in red marker As shown in the screenshot, there are extra pixels added to the image, image header("Online Experiences"), and description ("Unique activities... hosts."). I'm not a coder, so maybe I'm not understanding it correctly. From the development perspective, could someone explain why the blue block is defined in such manner?

From UX/UI perspective, designers would usually define the padding(green blocks), but don't think these extra pixels (indicated in red marker) are defined by designers.

Answer 1

If you look at the margin of the blue box, then you can see, that it's centered and the margin on the right has the same size as on the left side. So the responsiveness of that div box is correct.

The "extra pixels" part I think is because the picture can't fit your screen and the picture's attributes are set to keep it's xy side ratio, plus I think there is a min-height and a width: 100% attribute for that picture.

Ideally the picture can accomplish both min-height and width: 100% css rules, but since the width of the picture is relatively so big comparing to your screen's width, the browser can't accomplish the width: 100% rule and this is how you see the result.