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¹.

Inline-Level Elements

Inline-level elements, on the other hand, are laid out horizontally, in line with the text. These elements respect horizontal margins, borders, and padding, and can be aligned vertically in various ways, such as top, bottom, or baseline alignment. The area containing the inline elements is referred to as a line box¹.

Inline elements do not start on a new line and only take up as much width as necessary. For instance, a <strong> tag in HTML will make text bold without disrupting the flow of a sentence. If you want to display multiple lines of code, you can wrap a <code> element within a <pre> element to maintain the formatting².