diff options
| author | Jasper Ras <jras@hostnet.nl> | 2025-01-13 13:16:06 +0100 |
|---|---|---|
| committer | Jasper Ras <jras@hostnet.nl> | 2025-01-13 13:16:06 +0100 |
| commit | 9232b8d817d4cd4122947375156fa2fa1e9fba14 (patch) | |
| tree | e4feb77f2e508f008b78f722e91488bb9a3f3806 /0 inbox/1736752373 CSS relationships.md | |
| parent | ed0753ad224f0c65133bd7a63180257eecd9f5e3 (diff) | |
vault backup: 2025-01-13 13:16:06
Diffstat (limited to '0 inbox/1736752373 CSS relationships.md')
| -rw-r--r-- | 0 inbox/1736752373 CSS relationships.md | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/0 inbox/1736752373 CSS relationships.md b/0 inbox/1736752373 CSS relationships.md new file mode 100644 index 0000000..143cb40 --- /dev/null +++ b/0 inbox/1736752373 CSS relationships.md @@ -0,0 +1,22 @@ +css relationships +Elements live in relationship to each other + +parent -> child relationship : two-way. +width on children = auto; +area has to stay the same; less width -> more height +typical parent set width +margin-inline: auto -> margin left and right -> centers on screen. + +inheritence; ex font color is inherited by children. +==collapsing margins== -> child margin pushes down the parent (`display: flow-root;) +-> padding -> sides together = collapsing margin, after padding !sides together + +cssdemystified.com -> deep-dive in CSS internals + +siblings normally stack +flex, grid relationship more complex +different sized siblings can make things look weird; use flex or grid to set their width. + +flex; children influence siblings and parent +grid; more control over siblings. +padding : flex pushes on sibling so sibling is smaller, grid cell stays same; sibling dont affect each other.
\ No newline at end of file |