CSS ELEMENT POSITIONING

- Display

• inline: Default value. Displays an element as an inline element
• block: Displays an element as a block element
• flex: Displays an element as an block-level flex container.
• inline-block: Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
• inline-flex: Displays an element as an inline-level flex container
• none: The element will not be displayed at all
• initial: Sets this property to its default value.
• inherit: Inherits this property from its parent element.

- Margin

• The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
• The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once

- Padding

• The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
• The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

- Position

• static: Default value. Elements render in order, as they appear in the document flow
• absolute: The element is positioned relative to its first positioned (not static) ancestor element
• fixed: The element is positioned relative to the browser window
• relative: The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
• initial: Sets this property to its default value.
• inherit: Inherits this property from its parent element.