Skip to content

Instantly share code, notes, and snippets.

@Asheq

Asheq/css-display.md

Last active November 17, 2022 13:18
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Asheq/1ef5ec77b8e89c2c9da89d2b7a1cf8cb to your computer and use it in GitHub Desktop.
Save Asheq/1ef5ec77b8e89c2c9da89d2b7a1cf8cb to your computer and use it in GitHub Desktop.
Download ZIP
Compare CSS "display" Property Values
Raw
css-display.md
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 ❌ ✅ ✅

View Examples Here

@zkmoonea
Copy link

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.

@Asheq
Copy link
Author

Asheq commented Sep 28, 2019 •
edited

@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