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
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think repect in this context means blocks around the current one react to changes to the margin, padding of the current block. So I think inline blocks do not respect top/bottom padding.