blob: 143cb40706bf021ff96ef67322f669ca6fa265e7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.
|
