CSS — Part-3

All about CSS Layout

#Display

• specifies if/how an element is displayed.
• Default value depends on the type if element we are using. Most of the times it is block or inline.
• Values mostly used are :-
  1. inline — displays as an inline element. Any height and width properties will have no effect
  2. block — displays as a block element. It starts on a new line, and takes up the whole width
  3. flex — Displays an element as a block-level flex container
  4. grid — Displays an element as a block-level grid container
  5. inline-block — The element itself is formatted as an inline element, but you can apply height and width values
  6. table — Let the element behave like a <table> element
  7. none —The element is completely removed

Block-level Elements

• always starts on a new line and takes up the full width available
• <div>, <h1> — <h6>, <p>, <form>, <header>, <footer>, <section>

Inline Elements

• does not start on a new line and only takes up as much width as necessary.
• an inline element is not allowed to have other block elements inside it.
• <span>, <a>, <img>

display: inline-block