CSS property

  • initial

    Every property in CSS has its own initial values. These initial values represent the default value of a specified property, as defined by The Official CSS Working Group.

  • inherit

    The value inherit let the browser to look for the closest parent and pass the right value for the current property.

  • unset

    CSS unset is the combination between initial and inherit, depending on its type of property. The property who declared as an inherited property will be made unset act as an inherit. For anything else, the unset will act as an initial.

  • revert

    When a page loads, the browser has its styling for some CSS properties. The revert keyword, reverses the CSS default values to the browser user-agent styles.

mozilla.org: initial

postion

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

  • postion: static;

    The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

  • postion: relative;

    The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

  • postion: absolute;

    The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

mozilla.org: position

display

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

  • display: block;

    div, p, ul have a default block-level display behavior. Block-level means that once they’re placed in the template, they will take each the full-width of a complete row.

  • display: inline;

    span, a have a default inline-level display behavior. They can directly be placed side by side, however, we can not apply width or height properties for them.

mozilla.org: display