A web page's main content area needs extra space at the bottom. This space prevents content from being hidden by a fixed bar at the bottom of the screen. The fixed bar might show costs or other controls.
By Pawan Nayar · from the LLOS AI Learning record
A web page's main content area needs extra space at the bottom.
This space prevents content from being hidden by a fixed bar at the bottom of the screen. The fixed bar might show costs or other controls.
A developer must add extra space to the bottom of the main content area. This space is called padding. The padding should be at least 28 pixels. This ensures all content is visible above any fixed elements. Fixed elements are often at the bottom of the screen.
A developer creates a shopping cart page. The page has a fixed bar at the bottom showing the total cost. Without `padding-bottom: 28px` on the main content, the last item in the cart is hidden behind the cost bar. The user cannot see the full list of items.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
Floating elements need a special stacking order. This order is called a stacking context.
Buttons should only be as wide as the text they contain. Do not make buttons stretch to fill a space.
A developer can hide the hamburger menu icon on large screens. The developer can hide the regular navigation menu on small screens.
An AI model should never show a blank screen during loading. A blank screen makes the product seem broken.
A web page's main content area needs extra space at the bottom. This space prevents content from being hidden by a fixed bar at the bottom of the screen. The fixed bar might show costs or other controls.