A developer is attempting to create a flexible layout where the widths of two columns (side-by-side) adapt to the viewport size while maintaining a gap between them without using any framework. Which combination of box model properties and units should they use to accomplish this?
- width: 50%, margin: auto;
- width: 50%, padding: 5px;
- flex-grow: 1, flex-shrink: 1, flex-basis: 50%;
- width: 50%, margin: 5%;
The correct combination is width: 50%, margin: 5%;. This ensures each column is 50% wide with a 5% margin, providing a gap. The other options either lack a gap, use padding instead of margin, or involve flex properties, which may not achieve the desired layout.
Loading...
Related Quiz
- The box-shadow property can take a value of inset to create a shadow that appears ________ the element's box.
- To control the width of the columns in a multi-column layout, the CSS property used is column-width: ________.
- The ________ CSS property is essential for defining the external source of a custom font.
- You're designing a button that, when clicked, shows a loading spinner. The spinner should rotate continuously. Which properties are crucial for this effect?
- A developer needs to ensure that an SVG logo scales responsively with different screen sizes while maintaining its aspect ratio. Which SVG attribute should they focus on adjusting?