Web Development
Margin, Positions & Display

Margin, Positions & Display

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

3 min read

Position in CSS

  1. There are 5 types of positions in CSS

    • Relative: This implies it is relative to the normal position it would have been placed in the document flow.

    • Absolute: This will remove the element from the document flow and will always look for a parent/grandparent that has a position relative.

      If it does not find any parent/grandparent element which has a position relative then will consider the body as the relative position will be placed according to the body

    • Fixed: The element is removed from the normal document flow, and no space is created for the element in the page layout.

    • 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

    • Sticky: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other element

  2. For these properties, they should have a position associated with them be it absolute, relative, stick, etc

    • Property top:

      • Depending on the type of position used it behaves differently

        • If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.

        • If position: is relative; - the top of the property makes the element's top edge move above/below its normal position.

        • If the position: is sticky; - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

        • If the position: is static; - the top property has no effect.

## Margin- top vs top

1. When we apply margin-top/left/right the elements next to it will also be affected by it.

2. When we use the top the elements next to it are not affected.

3. One of the use cases for margins is when we want to place respect to something

4. Another use case of using margin is when we want to add space not inside the content but outside

5. An important point to note is that margins are collapsable


## Display

1. Display: flex

    * Will make all the children's elements as flex items

2. Display inline-block

    * The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much as a replaced element would.

3. Display block :

    * Always start on a new line. Take up as much horizontal space as possible (the full width of the container or browser window if there is no container) **Will respect width and height CSS properties**

    * Height & Width properties are not applicable to block-level elements

4. Display grid

    * The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
CSS