Top 30 Layout Interview Questions and Answers
30 multiple-choice questions on Layout, drawn from 30 bites out of the 128 tagged Layout on Tezvyn. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
Four divs are set to width: 25%, 10px padding, and 1px border. Under the default box model, why does the last div wrap to a new line?
Show the answer
Answer: a · The declared width applies only to content, so padding and border add extra width.
Under the default content-box model, width applies only to the content area, so padding and border increase the rendered size beyond 25% and cause wrapping. Distractor D is wrong because content-box is the browser default, meaning padding is added outside the declared width rather than included in it.
Read the full bite: Explain the CSS box model: content-box vs border-box
Question 2 of 30
An element has width: 200px, padding: 20px, and border: 5px. What is its final rendered width with box-sizing: content-box?
Show the answer
Answer: d · 250px
With box-sizing: content-box, the specified width (200px) applies only to the content area. The padding (20px on each side) and border (5px on each side) are then added outside this content, resulting in a total width of 200 + (2*20) + (2*5) = 250px. Option A (200px) would be the result if box-sizing: border-box were used.
Question 3 of 30
To perfectly center a child component both horizontally and vertically within its parent using Flexbox, which properties should be applied to the parent container?
Show the answer
Answer: c · flex: 1, justifyContent: 'center', alignItems: 'center'
Option C is correct because 'flex: 1' makes the parent fill available space, 'justifyContent: 'center'' centers children along the primary axis (vertical by default), and 'alignItems: 'center'' centers them along the cross axis (horizontal by default). Option B is incorrect because setting 'flexDirection: 'row'' would change the primary axis, altering how 'justifyContent' and 'alignItems' center the content relative axes.
Read the full bite: Flexbox: Responsive Layouts in React Native
Question 4 of 30
Two adjacent block-level siblings in normal flow have margin-bottom: 30px and margin-top: 20px. What is the resulting vertical space between them?
Show the answer
Answer: d · 30px, because the larger of the adjacent margins is used
Margin collapsing means adjacent vertical margins in normal flow combine into a single margin equal to the largest value, so 30px is rendered. The 50px option reflects the common misconception that margins always add together.
Read the full bite: What is margin collapsing? Give a sibling scenario and prevention.
Question 5 of 30
What is the key behavioral difference between nesting Text inside Text versus nesting components inside a View?
Show the answer
Answer: c · Text inside Text inherits text styles like color and fontSize, while View children do not inherit styles
Nested Text inherits text style properties from its parent Text, which is unique to text rendering. View does not propagate styles to its children, so each child View is styled independently.
Question 6 of 30
Which CSS display value allows an element to flow horizontally with surrounding text while still permitting explicit control over its width and height?
Show the answer
Answer: d · inline-block
Inline-block elements combine the characteristics of inline elements by flowing horizontally with text, and block elements by allowing explicit width, height, and vertical margin/padding. Inline elements flow horizontally but ignore width/height, while block elements take a new line.
Read the full bite: CSS 'display': How Elements Occupy Space
Question 7 of 30
You set two elements to "width: 50%" and add "padding: 10px". To guarantee they fit side-by-side without wrapping, which box-sizing value is best?
Show the answer
Answer: c · border-box, as it includes padding within the element's declared width.
With border-box, the element's declared width (50%) includes its padding, ensuring it occupies exactly 50% of the parent's space. content-box, the default, would add the padding outside the 50% width, making each element wider than 50% and causing them to wrap.
Read the full bite: CSS box-sizing: Predictable Element Sizing
Question 8 of 30
In React Native, what is the default flexDirection, and how does it compare to the web?
Show the answer
Answer: d · Default is column, which differs from the web's default of row
React Native defaults flexDirection to column, so children stack vertically, whereas standard CSS on the web defaults to row. The other options misstate both the React Native default and the web comparison.
Read the full bite: Default flexDirection and header-content-footer layout
Question 9 of 30
For a parent View with flexDirection column, which statement about alignItems and justifyContent is correct?
Show the answer
Answer: a · justifyContent aligns children along the vertical main axis and alignItems along the horizontal cross axis
With column direction the main axis is vertical, so justifyContent governs vertical placement and alignItems governs the horizontal cross axis. The horizontal-versus-vertical labeling in the first option is the common mistake that only holds for row layouts.
Question 10 of 30
When you set position absolute on a child View in React Native, relative to what are its top and left offsets measured?
Show the answer
Answer: a · Its nearest positioned ancestor, typically the parent View
Absolute offsets are measured against the nearest positioned ancestor, usually the parent View, not the whole screen. React Native also has no position fixed, which is why screen-relative positioning is not the default behavior.
Question 11 of 30
When using position: absolute on a child element, why might its direct parent be set to position: relative?
Show the answer
Answer: a · To establish a specific positioning context for the child, preventing it from positioning relative to the viewport or document body.
Setting a parent to position: relative creates a positioning context, ensuring that its position: absolute children will position themselves relative to that parent. This prevents the absolutely positioned child from positioning relative to the <body> or another distant ancestor. Position: relative on the parent does not remove it from the normal document flow.
Read the full bite: CSS Positioning: Taking Elements Out of Normal Flow
Question 12 of 30
An element with position: absolute has its offsets computed relative to which box?
Show the answer
Answer: a · The padding box of the nearest ancestor whose position is not static
Absolutely positioned elements resolve against the nearest positioned ancestor's padding box, not necessarily the direct parent. The viewport rule is for fixed, and the normal-flow ancestor rule applies to static and relative elements.
Question 13 of 30
According to the card, what is the primary design intention behind CSS margin collapsing?
Show the answer
Answer: b · To ensure a consistent and predictable vertical rhythm in document typography.
The card explicitly states that margin collapsing "was designed to create consistent vertical rhythm in documents." While it does prevent margins from adding up, that is a mechanism to achieve the primary goal of aesthetic consistency, not the goal itself.
Read the full bite: CSS Margin Collapsing: The Largest Margin Wins
Question 14 of 30
What is the primary reason for adopting a spacing scale in UI design?
Show the answer
Answer: c · To establish a consistent visual rhythm and prevent arbitrary spacing choices in layouts.
The card states that a spacing scale exists "To prevent chaotic, inconsistent layouts" and provides "a shared language and constraints to create predictable, scannable UIs." Option C directly reflects this goal. Option B is incorrect because a spacing scale limits choices, rather than enabling unique adjustments for every element. Options B and D contradict the card's explicit statements about what spacing scales are not used for (font sizes/borders) and how they are implemented (using tokens, not raw pixel values).
Read the full bite: Spacing Scales: Using Multiples for Consistent UI
Question 15 of 30
Which action would cause an error or unexpected behavior when using React Native's View component?
Show the answer
Answer: a · Directly placing plain text content, like "Hello World", as a child of a View.
The card explicitly states that 'All text content must be placed inside a <Text> component, or your app will throw an error.' The other options describe valid and common uses of the View component for layout and styling.
Read the full bite: The View Component: React Native's UI Building Block
Question 16 of 30
Why might an element with z-index: 9999 still appear behind another element with z-index: 10?
Show the answer
Answer: d · The element with z-index: 9999 is a descendant of an element that established a new stacking context, which itself is stacked below the z-index: 10 element.
A new stacking context traps its descendants, meaning they can only stack relative to each other within that context. If the element creating this context is itself stacked below another element (like the z-index: 10 element), its children, regardless of their high z-index, cannot escape to appear above it. Option C is incorrect because while transform creates a stacking context, it doesn't automatically elevate its stacking order above all others; its position is still relative to its parent's context.
Read the full bite: CSS Stacking Contexts: The Z-Axis Explained
Question 17 of 30
What is the primary reason styles applied to a parent View component do not directly affect text within a child Text component?
Show the answer
Answer: b · Text components operate within a distinct "text world" where styles must be explicitly defined or nested.
The Text component creates a special "text world" with its own layout and styling rules, meaning styles from a parent View are not inherited. Instead, styles must be applied directly to the Text component itself or through nested Text components.
Read the full bite: React Native's Text Component: Beyond Displaying Words
Question 18 of 30
In the context of Vertical Rhythm, what is the foundational element used to derive the consistent spacing unit for a page layout?
Show the answer
Answer: b · The line height of the body text
The card explicitly states that the vertical rhythm system "is built from the body text's line height," which then forms the basis for calculating all other vertical spacing units. While other options relate to layout, they are not the foundational element for this specific system.
Read the full bite: Vertical Rhythm: A Formula for Consistent Spacing
Question 19 of 30
Which common layout issue involving a parent container and its floated child elements is directly resolved by establishing a Block Formatting Context (BFC) on the parent?
Show the answer
Answer: d · The parent container's background or border failing to expand and enclose its floated children.
The card explicitly states that a primary use of BFC is to 'contain floats' and gives an example where a parent's border fails to wrap a floated image, which a BFC fixes. While BFCs also prevent margin collapse (Option B), the question specifically asks about issues involving 'parent container and its floated child elements', making float containment the most direct answer.
Read the full bite: Block Formatting Context: Taming Floats and Margins
Question 20 of 30
Which CSS property, applied to an ancestor with `position: static`, would establish it as the containing block for a `position: absolute` child?
Show the answer
Answer: c · transform
The card states that for absolute elements, an ancestor with properties like `transform`, `filter`, or `perspective` will become the containing block, even if its own `position` is `static`. While `position: relative` does create a containing block, it requires the ancestor's position to be non-static, which contradicts the question's premise.
Read the full bite: CSS Containing Block: The Box That Defines Your Box
Question 21 of 30
Which characteristic primarily explains why ScrollView is discouraged for long, dynamic lists?
Show the answer
Answer: c · It renders all its child components into a single view at once, consuming significant resources.
The card explicitly states that ScrollView renders every single item, even those off-screen, leading to poor performance and high memory consumption. This simultaneous rendering of all content is the fundamental limitation, while other options describe consequences or secondary issues.
Question 22 of 30
When should you generally avoid using the CSS `background` shorthand property?
Show the answer
Answer: b · When you only intend to modify one specific background property of an already styled element.
The `background` shorthand resets all unspecified background properties to their default values. Therefore, using it to change only one property on an existing background will inadvertently remove or reset other previously set properties. Options A, B, and D describe scenarios where the shorthand is efficient and recommended.
Read the full bite: CSS `background`: The All-in-One Shorthand
Question 23 of 30
How should you document an asymmetrical layout for engineering handoff to keep it predictable and systematic?
Show the answer
Answer: c · Specify macro ratios, flex basis, and spacing tokens while preserving an underlying grid reference
The correct approach documents relationship rules such as flex ratios and spacing tokens rather than absolute pixels, preserving a shared grid reference for engineers. Option D is tempting because redlined mockups feel precise, but absolute pixel values prevent responsive scaling and force engineers to reverse-engineer relationships from a static image.
Read the full bite: How do you apply systematic rules to asymmetrical layouts predictably?
Question 24 of 30
Given the CSS declaration border-radius: 10px 20px;, which corners will receive a 20px radius?
Show the answer
Answer: d · Top-right and bottom-left
The card states that with two values, the first value applies to the top-left and bottom-right corners, while the second value applies to the top-right and bottom-left corners. Therefore, 20px will be applied to the top-right and bottom-left corners. Option B describes the application of the 10px value.
Read the full bite: border-radius: More Than Just Rounded Corners
Question 25 of 30
When is it appropriate to use alignSelf on a child component instead of alignItems on its parent container?
Show the answer
Answer: d · When a single child needs to be aligned differently on the cross axis than its siblings.
alignSelf is specifically designed to override the parent's alignItems property for a single, individual child component. Option C describes the function of justifyContent, while option B describes a specific value (stretch) of alignItems, not the choice between alignItems and alignSelf.
Read the full bite: alignItems: Aligning Children on the Cross Axis
Question 26 of 30
A designer needs to fix an awkward gap between 'T' and 'o' in a large headline and also make the letters in a paragraph of body text appear more tightly packed. Which typographic adjustments are most appropriate?
Show the answer
Answer: a · Apply negative kerning to the 'To' pair and apply negative tracking to the body text.
Negative kerning is used to reduce space between specific letter pairs, perfect for fixing awkward gaps in headlines. Negative tracking uniformly reduces space between all letters in a block, making them appear more tightly packed. Option B incorrectly applies tracking to a pair and misuses leading for horizontal density.
Read the full bite: Kerning, Tracking, and Leading: Spacing in Typography
Question 27 of 30
In CSS Grid, how does an auto-sized column behave compared to a 1fr column?
Show the answer
Answer: d · It collapses to the content width and does not fight for leftover space
Auto tracks shrink-wrap to their content's intrinsic width and only absorb leftover space when no fr tracks compete. Distractor B is wrong because auto does not automatically fill remaining space like 1fr, a common misconception the card flags as a red flag.
Read the full bite: CSS Grid: difference between 1fr and auto column sizing?
Question 28 of 30
When a flex container overflows because the sum of flex-basis values exceeds its width, how does the browser determine how much each item shrinks?
Show the answer
Answer: a · Each item surrenders space in proportion to the product of its flex-shrink and flex-basis values.
The flexbox algorithm weights each item's shrink factor by its flex-basis, so larger starting items surrender more of the overflow relative to their siblings. Option D is tempting because flex-grow distributes leftover space by ratio alone, but flex-shrink specifically factors in the starting size to determine how much each item gives up.
Read the full bite: Explain flex-grow, flex-shrink, flex-basis and their interaction
Question 29 of 30
What happens if the color value is omitted when defining a CSS box-shadow?
Show the answer
Answer: c · The shadow inherits the parent element's computed text color.
The card explicitly states that omitting the color causes the shadow to inherit the parent element's text color, which is a common 'footgun' or pitfall. It does not default to black, become ignored, or inherit the background color.
Read the full bite: CSS box-shadow: Creating Depth and Elevation
Question 30 of 30
Which statement best captures the fundamental role of white space in effective design?
Show the answer
Answer: a · It actively structures content, clarifying relationships between elements and guiding user attention.
The card explicitly states white space is an "active, not passive" tool used to "structure content," "grouping, separating, and focusing attention." Option A directly reflects this by highlighting its role in clarifying relationships and guiding user attention, which is its fundamental purpose. Option C is a tempting distractor because white space can create a sophisticated mood, but this is a secondary effect, not its primary functional role.
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.