A developer is confusing margin and padding while debugging a layout and wants a quick way to remember which is which. Which correctly distinguishes the two?
Author: Anonymous
Fourth Panel Comics used to space out flex items with `margi…
Fourth Panel Comics used to space out flex items with `margin-right` on every item except the last, and now wants to switch to the `gap` property instead. What does `gap` do differently?
A user with low vision increases their browser’s default fon…
A user with low vision increases their browser’s default font size to make text easier to read. A site’s padding is declared in rem units. What happens to that padding as a result?
Anchor Point Law Firm’s developer isn’t sure whether `justif…
Anchor Point Law Firm’s developer isn’t sure whether `justify-content` should be written on the flex container itself or on each individual flex item inside it. Where does it actually belong?
Willow Creek Wellness Spa wants its class-schedule table to…
Willow Creek Wellness Spa wants its class-schedule table to have merged cell borders, comfortable internal spacing, alternating row colors, and a highlight on whatever row the cursor is over — four separate visual effects. Which four CSS rules, respectively, deliver these?
Beacon Law Group’s designer sets h1 { font-weight: 650; } on…
Beacon Law Group’s designer sets h1 { font-weight: 650; } on a variable font to get a weight between semi-bold and bold. If the same rule were applied to a traditional, non-variable font family that only includes 400 and 700 weight files, what would likely happen?
A team is building a page with a product photo, a logo that…
A team is building a page with a product photo, a logo that needs a transparent background, and a small animated loading spinner.
A demo lets a user drag a slider that changes the simulated…
A demo lets a user drag a slider that changes the simulated browser font size, while comparing one element with px padding to another with rem padding. What should the user observe about the px-padded element as the slider moves?
A designer creates a simple two-color animated icon and a se…
A designer creates a simple two-color animated icon and a separate, richly colored animated banner with smooth gradients, planning to save both as GIFs.
Green Acres Farmers Market switches a card container from `f…
Green Acres Farmers Market switches a card container from `flex-direction: row` to `flex-direction: column`. What does `align-items` now control, now that the cross axis has changed?