In CSS, the layout of elements on a webpage is primarily controlled by the display property, which determines whether an element is treated as a block or inline element. This property also influences the layout of an element's children, dicturing whether they follow a flow layout, grid, or flex.

Block-Level Elements

Block-level elements, as defined by the CSS 2.1 specification, create a block formatting context. This means that these elements stack vertically, one after the other, starting from the top of their containing block. The vertical spacing between block-level elements is governed by their 'margin' properties, and adjacent vertical margins may collapse into a single margin, taking the size of the largest margin¹.

For example, if you have two paragraphs as block-level elements, they will naturally stack one on top of the other. If you set their margins to zero, their borders will touch, indicating no space between them. Block-level elements typically consume all available inline space, meaning they stretch to the full width of their containing element unless a width is explicitly set¹.