| Behavior | inline | inline-block | block |
|---|---|---|---|
| Adjacent elements react to horizontal (left/right) padding | ✅ | ✅ | ✅ |
| Adjacent elements react to horizontal (left/right) margin | ✅ | ✅ | ✅ |
| Adjacent elements react to vertical (top/bottom) padding | ❌ | ✅ | ✅ |
| Adjacent elements react to vertical (top/bottom) margin | ❌ | ✅ | ✅ |
| Default width is width of its container (not width of its contents) | ❌ | ❌ | ✅ |
| Forces a line break (does not allow elements to sit beside it) | ❌ | ❌ | ✅ |
| Respects height/width when specified | ❌ | ✅ | ✅ |
Last active
August 15, 2024 04:28
-
-
Save Asheq/1ef5ec77b8e89c2c9da89d2b7a1cf8cb to your computer and use it in GitHub Desktop.
Compare CSS "display" Property Values
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@zkmoonea, Thanks for the input! I understand what you mean: for elements with
display: inline, adjacent elements do not react to its vertical (top/bottom) padding, i.e., they are not pushed away. I will update the table and use more precise wording.