CSS Layout and Positioning Quiz

How does `margin: auto;` work when applied to an element with a specified width in a block layout?

• The margin collapses

• It centers the element horizontally

• It has no effect

• It aligns the element to the left

Hey there, design wizards! If Henry wants to prevent content from overlapping the border due to negative margins, which property should he adjust?

• `padding`

• `border`

• `overflow`

• `box-sizing`

Hey Abigail! In a design class, when two vertically adjacent margins collapse, which margin stays?

• The larger margin is used

• The smaller margin is used

• The margins are averaged

• The margins are removed

How can you prevent margin collapsing between two adjacent elements?

• Use `display: flex;`

• Use `padding` on one of the elements

• Use `float: left;` on both elements

• Use `box-sizing: content-box;`

Hey students! Which factor does NOT influence the computed height of an element with `box-sizing: border-box;`?

• Padding

• Border

• Margin

• Content

What happens to an inline element when `width` and `height` properties are applied?

• The element stretches to the specified width and height

• The properties are ignored

• The element becomes a block-level element

• The properties are applied but not visible

How does the box model differ between `display: inline-block;` and `display: block;`?

• Margin is ignored for `inline-block`

• Padding affects the size of `inline-block` elements

• Borders do not apply to `inline-block`

• Width is ignored in `inline-block` elements

What happens if you set `overflow: hidden;` on an element with `box-sizing: border-box;` and its content exceeds the available space?

• The content will be clipped

• The element will expand to fit the content

• A scroll bar will appear

• The content will flow outside the box

How can you make an element's border and padding contribute to its total width, but not its margin?

• `box-sizing: content-box;`

• `box-sizing: margin-box;`

• `box-sizing: border-box;`

• `box-sizing: padding-box;`

Hey there, Harper! If a parent element has `overflow: hidden;`, what happens to its child elements with negative margins?

• The child will be completely hidden

• The child will overflow out of the parent

• The child will stay within the parent's bounds

• Negative margins are ignored