Inline & Block Elements
Inline Elements
An inline element:
- does not start on a new line,
- takes only as much width as its content needs,
- ignores
widthandheight, and only uses left/right margins.
Common inline elements:
<span> <a> <strong> <em> <img> <code> <label> <button> <input>Example:
<p>This is <strong>bold</strong>, this is <em>italic</em> and this is <a href="#">a link</a>, all on one line.</p>Block vs inline
| Block | Inline | |
|---|---|---|
| New line | Yes | No |
| Width | Full container width | Only as wide as content |
| Width/height | Respected | Ignored |
| Can contain | Block and inline elements | Only inline elements and text |