CSS Box Model & Spacing Flashcards

What is 'margin collapsing' in CSS?

Answer: When adjacent vertical margins combine into a single margin equal to the largest value

Margin collapsing occurs when vertical margins of adjacent block elements merge into one margin whose size is the largest of the individual margins.

Which layout context prevents margin collapsing from occurring between parent and child elements?

Answer: Flex formatting context

Flex containers create a flex formatting context, which prevents margin collapsing between the container and its flex items.

Given `padding: 5px 10px 15px`, what is the computed padding for the left side?

Answer: 10px

With three values, the pattern is: top=5px, left/right=10px, bottom=15px — so the left side inherits the second value.

Which CSS property specifies the space outside an element's border, pushing away surrounding elements?

Answer: margin

Margin creates space on the outside of the border, creating distance between an element and its neighbors.

What is the effect of setting a negative margin value in CSS?

Answer: It pulls the element toward the direction of the negative margin, potentially overlapping other content

Negative margins pull elements in the specified direction, reducing the space and potentially causing overlap with adjacent elements.

In the CSS box model, which layer is directly adjacent to the element's content area?

Answer: Padding

Padding is the first layer surrounding content, positioned between the content and the border.

Which CSS property determines how the width and height of an element are calculated relative to padding and border?

Answer: box-sizing

`box-sizing` controls whether padding and border are included in or added to the element's declared width and height.