組件旁邊添加了額外的像素（Airbnb 移動應用程序）？

Question

我正在查看 Airbnb 移動應用程序版本的代碼（通過檢查員模式）。 帶有紅色標記的額外像素的屏幕截圖 如屏幕截圖所示，圖像、圖像標題（“在線體驗”）和描述（“獨特的活動...主機。”）中添加了額外的像素。 我不是編碼員，所以也許我沒有正確理解它。 從開發的角度來看，有人可以解釋為什么以這種方式定義藍色塊嗎？

從 UX/UI 的角度來看，設計師通常會定義填充（綠色塊），但不要認為這些額外的像素（用紅色標記表示）是由設計師定義的。

Answer 1

如果您查看藍色框的邊距，您會看到它居中，右側的邊距與左側的大小相同。 所以那個 div 框的響應是正確的。

我認為“額外像素”部分是因為圖片不適合您的屏幕，並且圖片的屬性設置為保持 xy 邊比，另外我認為該圖片有min-height和width: 100%屬性.

理想情況下，圖片可以同時實現min-height和width: 100% css 規則，但是由於圖片的寬度與屏幕寬度相比相對較大，瀏覽器無法實現width: 100%規則，這就是如何你看到了結果。