Inline and block elements
Inline Elements
Display Characteristics
- Do not start on a new line.
- Take up only as much width as necessary.
- Cannot have a width and height set.
Usage
- Typically used for small chunks of content within a block-level element.
- Used to style a part of a text, such as
<span>,<em>,<strong>, etc.
Example
```
<span>, <a>, <img>, <b>, <i>, <strong>, <em>, <br>, etc.
```
CSS Styling
* 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.
Block Elements
Display Characteristics
- 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.
Usage
- Used for larger parts of the layout, like sections, articles, navigation bars, etc.
- Suitable for structuring the main layout of the page.
Examples
```
<div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <nav>, <header>, <footer>, <section>, etc.
```
CSS Styling
- Margins and paddings applied in any direction will affect the layout and push other elements away.