A button's width must match its text label and padding. A button must not stretch to fill all available space. Buttons should be arranged in a horizontal row.
By Pawan Nayar · from the LLOS AI Learning record
A button's width must match its text label and padding.
A button must not stretch to fill all available space. Buttons should be arranged in a horizontal row.
A button should only be as wide as its text and the space around the text. This is called content-sized. A button should never take up 100% of the width of its container. This is called train-width. Place buttons next to each other in a row. For small screens, allow buttons to move to the next line.
A developer creates a page with three buttons: 'Yes', 'No', and 'Maybe'. If the developer makes each button fill the entire width of the screen, the buttons look like three large blocks. This is a bad design. Instead, each button should only be wide enough for its word. The three buttons then sit side-by-side.
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.
Buttons should only be as wide as the text they contain. Do not make buttons stretch to fill a space.
A developer should give the map wrapper `position: relative` and `z-index: 1`. This creates a stacking context.
A developer can set the parent element's CSS `position` to `relative`. This allows child elements with `position: absolute` to move within the parent.
A developer should use inline SVG for icons that need to be centered. Inline SVG allows precise control over the icon's position.
A button's width must match its text label and padding. A button must not stretch to fill all available space. Buttons should be arranged in a horizontal row.