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.
Add your answer
Loading...

Leave a comment

Your email address will not be published. Required fields are marked *