logo

Web UI Layout Basics

- May 20, 2020

Photo by Pankaj Patel on Unsplash

UI layout defines the general structure of the document. It is laid out by the browser through following many different rules that can be customized.

Block elements

Block elements prevent other elements from being on the same horizontal line. Block elements occupy the complete horizontal lines no matter how small their content actually is. It gives the impression of a "line return". Headings are block elements because we don't want them to share their line with another element. The same goes for paragraphs. By default, the width of a block element is equal to 100% of its container. As such, it fills up the entire horizontal line. When the width of the block is less than 100%, it will still "reserve" the whole line for itself. As such, a block element with 10% width will still "occupy" the whole line, but its content will only fill 10% of the horizontal line.

Inline elements

On the other hand, Inline elements only take up as much space as how big they are. An inline element won't create a line return at its end. As such, different Inline elements will stack up on the same horizontal line until they fill it up. For example, we want an inline link to be on the same line as the text he is nested in. We also want the navigation bar navigation links to share the same line.

Inline elements cannot have an arbitrary size, as their size is determined by their content. As such, we cannot set the width or height of inline elements, such as links or images. If we want to set the width or height of an image or any other inline element, we must transform it to either a block or an inline block.

Inline-block elements.

Inline blocks are different from block elements as they don't "reserve" the whole line and can stack up on the same line. Inline blocks are different from inline elements as their sizing is not determined by their content, and can be set to any arbitrary size. As such, inline blocks are very customizable.

Inline block also have a specific margin behaviour. The margin of an inline block will never collapse, or "merge", with the margin of another element. As such, margins of an inline block will always add up with the margins of others elements.

Alignment

To align an element means to set the position of an element according to the position of another element. As such, alignment is a relationship between two elements.

Inline and inlined block elements can be aligned. For example, inline elements contained inside a block element can be aligned to the start, the center or the end of the container, through the "text-align" CSS property. The CSS property is set at the container level, so that every inline child, including text, can follow that alignment. In addition to simple alignments, Flex and Grid can create more sophisticated alignments. For example, elements on a same line can spread along the line with equal spacing between them. Two elements can be split up and be placed at the start and the end of the line.

Block elements on the other hand cannot be aligned because they already occupy the whole horizontal line. Even if a block has a 10% width, it can't follow any alignment set up by its parent. As such, the "text-align" property defined by a parent container won't have any effect on its child block elements. A block can still be centered through the use of "margin:auto", but it isn't an alignment.

Generally speaking, complex layouts usually require a container element. Layout rules are defined at the container level, so that it can layout its children accordingly. Both Flex and Grid use a container element on which we define either display:flex or display:grid, along with the general layout rules.

Sizing

An element has an height and a width. Those dimensions are either set explicitly or implicitly.

Most elements have an implicit size. Implicit size is determined by the element inner content. As such, they don't need an explicit size. Empty elements will have a zero size by default since a size can't be inferred.

  • Padding adds up space inside the element body. It makes the element bigger.

  • Border adds up space around the element body. It makes the element bigger.

  • Margin adds up space around the border. It makes the element bigger.

By default, the width and height properties will only set the element inner size, also called content size. To calculate an element total size, we need to add the padding and the border, and even the margin in some cases. This means the width and height of an element are not representative of the "real" width and height of the element.

Most of the time, this is not an issue. However, if one wants to do precise layouts with fixed size elements, and wants the size to account for both margin and padding, then one can opt-in for the border-box behaviour, rather than the content-box behaviour.

box-sizing:border-box means the width and height apply to the element at the border level: the element border is now the boundary of the element and any border or padding will grow inside the border-box rather than expanding from the content-box.

Positioning

An Element position is calculated by the browser based on the default and custom layout rules in combination with where the element stands in the DOM. As such, most elements don't need explicit positioning.

The general flow of content is left to right on the same line for inline elements, and then top to bottom for block elements. This may vary depending on the localization.

Sometimes, we want elements not to be in the flow of the document. For example, we may want a navigation bar to stick at the top of the browser window no matter how much scrolling has been done. In that case, the navigation bar is out of the main flow, and won't reserve room for itself in the main flow. As such, the element is in its own flow. This leads to some elements of different flows having the same "position". The element with a higher z-index will hide elements beneath it.