AI Snips
Chapters
Transcript
Episode notes
Child Margin Moving The Parent
- A coworker saw a child element's large margin push its parent and wondered why the parent moved.
- They fixed it by adding overflow:hidden to create a BFC and contain the child's margin.
Check Browser Defaults And Scope Styles
- Check user agent styles and scope your custom margins to avoid unexpected defaults from parsed markdown.
- If a child's margin appears to move its parent, create a new BFC (e.g., overflow:hidden) to contain it.
Don't Use Vertical Margins On Inline Or Table Cells
- Avoid relying on vertical margins for inline or table-cell elements; they won't push in the block direction.
- Use padding for inline elements and border-spacing or horizontal auto margins for table cells instead.