Inline and block elements
- Do not start on a new line.
- Take up only as much width as necessary.
- Cannot have a width and height set.
- Typically used for small chunks of content within a block-level element.
- Used to style a part of a text, such as
``` <span>, <a>, <img>, <b>, <i>, <strong>, <em>, <br>, etc. ```
* Margins and paddings applied horizontally (left and right) will affect layout, but vertical margins and paddings (top and bottom) will not push other elements away.
- Always start on a new line.
- Occupy the full width available (stretches out to the left and right as far as it can).
- Can have width and height set.
- Used for larger parts of the layout, like sections, articles, navigation bars, etc.
- Suitable for structuring the main layout of the page.
``` <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <nav>, <header>, <footer>, <section>, etc. ```
- Margins and paddings applied in any direction will affect the layout and push other elements away.