Know Thy CSS Display Default

The default size for a HTML replaced element is: 300px wide, 150px tall. This applies for <img>, <object> or <iframe> and <svg> elements.

Display

Note that the centering of the <a> tags text requires some consideration.
The a element itself is display: inline by CSS standard default.

Inline

A display: inline element, having per spec no line break before or after it, will effectively display it's content row-wise.

Noteable definitions for an display:inline apply per spec

• the height and width properties are ignored, so they collapse
• the top and bottom margins are ignored

The spec describes a display: inline element conceptionally to consist of one to many line boxes. If there isn’t enough horizontal space to fit all content into a single line, another line box is created under the first one. A single inline element may then be split across lines. Note that line boxes per se are not renderable in the browser, they exits only conceptionally.

When a display: inline element is split across more than one line, any horizontal padding, border, or margin is only applied to the start of the first line occupied by the box, and the end of the last line. However, note that vertical padding and border are still applied, and the padding pushes out the border and may overlap over the lines above and under.

vertical-align aligns the inline elements like text and image with each other, it does NOT position them vertically within their parent element. The vertical-align property is meant for aligning inline elements vertically to a common horizontal line. And the position of the line box’s baseline is affected by all elements in that line.

For example, you might want to align text to the top, middle, baseline, or bottom of larger text or image on the same line. As an example, vertical-align: middle is the midpoint between the element's top and bottom edge, which is aligned to the line box's baseline plus half of the x-height(t.i. lower case letters without ascenders). But, so to repeat, it does NOT position anything vertically within their container.

If you need to adjust the height between line boxes, use line-height.

Summary

• The height and width property are ignored; Do not try to align the content of an inline element vertically to it's parent element via vertical-align: middle - it has no height, hence there is nothing to be aligned against.
• The top and bottom margin are ignored.
• The top and bottom padding are present, but overlap over the lines above and under.

Block

For display:block, all those elements will be displayed in a row flow. But a block element is immediatly intrinsic followed by a line break; effectively displaying it's elements column-wise.

TODO box-content model vs

To position it's content vertically, set the line-height property to the same value as the

Inline-Block

A display: inline-block element is a chimera of both inline and block qualities.

It's only difference to the block element is that it is NOT immediatly intrinsic followed by a line break;

It's only difference to the inline element is that it is CAN have a height and width property;

Table and Table-Cell

Float

Flex

In a flexbox element, all flex items are blockified.

https://www.w3.org/TR/css-flexbox-1/#flex-items

The display value of a flex item is blockified : if the specified display of an in-flow child of an element generating a

flex container is an inline-level value, it computes to its block-level equivalent.

Grid

Position

The position attribute has the static value by CSS standard default. An element with position: static is said to be not positioned, hence it is rendered in the order of the document flow.

Elements with position: static ignore the z-index. Which does prevent it's usage for example on applying a shadow effect onto their neighbours.

All other position values are said to produce positioned elements. From there a element is positioned according to the values of it's top, left, right and bottom positioning attributes.

Absolute positioned

The 0-coordinate for a position: absolute element is the top-left corner of that parent element that is the nearest non-static ancestor. If there is no such element, it is the top-left corner of the page itself. Despite that 0-coordinate dependency, they are put totally out of the natural flow of the other elements.

Relative positioned

The 0-coordinate for a position: relative element is the top left corner of it's normal position. So if you add no positioning attribute on a relative element it will have no effect on it's position at all. It will behave exactly like a position: static element.

Fixed positioned

The 0-coordinate for a position: fixed element is the top left corner of the browser window.