How does the display property affect box model calculations?

inline-block – Flows inline like text but respects width, height, padding, margin, and border like a block element.

flex / inline-flex – Establishes a flex container. Child elements’ boxes are sized according to flex properties, while the container itself behaves like a block (flex) or inline (inline-flex).

grid / inline-grid – Creates a grid container. Child elements’ boxes follow the grid layout rules, while the container acts as block (grid) or inline (inline-grid).

contents – Removes the parent box from layout. Box model properties (padding, margin, border) on the parent have no effect, but child elements retain normal box behavior.