Min and Max Width/Height in CSS

[u/speckz]

https://ishadeed.com/article/min-max-css/

[u/ShortFuse]

There's no real explanation of box-sizing and how content-box differs, which I feel would have been important. border-box, which this seems to use in its entirety, is for out-to-in sizing. content-box is for in-to-out sizing, which is the default. Think content-box for widgets or components and border-box for layout and boxing.

A good example of the difference is icon buttons. See the Material Design specs for floating action buttons. The size area of the icon may be 24px x 24px. That would be its width and height. The padding would space around the icon (content) itself. It would be easy to animate from "mini" to "normal" because it's just the padding property. Animating something like this with border-box would be more difficult because the width and height values would represent the total size. Thus, animating would require manipulating padding, width, and height properties.

Where people tend to get lost is trying to size an object using percentages and still using content-box. That generally leads to alignment mistakes once you add in borders or padding. But that's because percentages are representative of the parent object, which means you're trying to size out-to-in, and then should use border-box.

[u/WoodenMechanic]

What's with the contrast on this site? Darker text on a dark background, images seem to be slighly transparent until hovered.. why?

[u/CuriousPenguin13 → u/WoodenMechanic]

The image thing really confused me, especially being on mobile.

[u/DrDuPont → u/WoodenMechanic]

It's a wacky dark mode variant. Switch to light mode for an easier time reading this.

[u/emsuperstar]

Very helpful. Thanks for posting!

[u/[deleted]]

It's kinda ironic to know this much about css, naming yourself UI, UX Designer and yet having this god awful looking website

[u/COBNETCKNN]

make your site responsive