CSS Block verses Inline
All elements in CSS have one of three display types. The characteristics of these types are:
- Block (display:block;)
- New line before and after.
- Takes up the available width.
- Width, height, margin-top, margin-bottom can be set.
- Inline (display:inline;)
- No new line.
- Only uses the width it needs.
- Width, height, margin-top, margin-bottom, padding-top, padding-bottom are ignored.
- None (display:none;)
- Not visible.
Each HTML tag has a natural display type, which can be overridden with the CSS display property.
| Block | Inline | None |
|---|---|---|
| <div> | <span> | <meta> |
| <h1>...<h6> | <a> | <style> |
| <p> | <b>,<strong> | |
| <ul>,<ol>,<dl> | <img/> | |
| <li>,<dt>,<dd> | <br/> | |
| <table>,<tr> | <em>,<i> | |
| <blockquote> | <input> | |
| <pre> | <addr>,<acronym> | |
| <form>,<fieldset> | <sub>,<sup> | |
| <label> |
The difference between display:none and visibility:hidden, is that a display:none element takes up no space on the page, whereas an visibility:hidden element still uses space - you just can't see it.