*Vertical* centering in CSS with margin: auto
Published on in CSS and CSS for JS Devs course
margin: auto is not only for horizontal centering.
CSS for JS Devs course
*Vertical* centering in CSS with
position: fixed breaks if any of its ancestors uses transform
Published on in CSS and CSS for JS Devs course
Or perspective or filter.
This can easily cause confusing bugs.
Different logics behind heights and widths in CSS
Published on in CSS and CSS for JS Devs course
height and width work somewhat differently in CSS.
height looks "down" the tree
whereas width looks "up" the tree.
Block vs inline directions in CSS
Published on in CSS and CSS for JS Devs course
Block elements stack on top of each other. Inline elements are placed side by side.
Firefox DevTools can explain why some CSS styles have no effect
Published on in CSS and CSS for JS Devs course
Last updated on
It's frustrating when a CSS declaration is technically valid (not crossed out in the browser's DevTools) but has no effect for some reason. Firefox DevTools can often tell you why and also how to potentially fix those issues! (Update: Chrome 108+ can too.)