4 ms·

An element that has: display: inline-block is inline outside, block inside. That is, the element is inline for the containing block, but its children fee

by jraph 6y ago

An element that has: display: inline-block is inline outside, block inside. That is, the element is inline for the containing block, but its children feel like they are in a block. An inline-block element can be vertically aligned with respect to the baseline: it acts a bit like a character in a paragraph. That's why you can vertically center things using vertical-align:center on an inline-block element. At least, this is my intuition of inline-block, this comment is far from being normative.

runarberg 6y ago
To be even more pedantic: It is inline outside and flow-root inside. From MDN: > The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies. https://developer.mozilla.org/en-US/docs/Web/CSS/display-inside https://developer.mozilla.org/en-US/docs/Web/CSS/display-ins...
- jraph 6y ago
  Ah but then it does not work as a mnemonic anymore! I'm kidding. Thanks, TIL I learned that with now have display-inside and display-outside (and flow[-root]). This makes perfect sense. Finally, even, I'd say. Having a property that defines both the behaviors of an element outside and inside without being able to define these behaviors separately was both strange and limiting. I'm happy I even used the terms that have been chosen to speak about these notions in CSS by chance. How do you track all these useful additions to CSS conveniently though? I can't rely on random comments on HN to learn about them by chance (no offense intended to your valuable comment btw, being random is perfectly fine). I also can't possibly systematically learn about each and every addition neither. Are there resources addressing this?
  - runarberg 6y ago
    I recommend taking the State of CSS[1] survey, it is a nice way of keeping up with the latest features. Other then that I use PostCSS with the postcss-preset-env[2] plugin. There you can enable various future features of the language and have it compile down to a more supported version. If your really want to dive into the future of CSS you can read the issue board for the CSSWG[3] (beware, it can suck hours out of your days). Smashing Magazine[4] and A List Apart[5] also sometimes have articles about a new(ish) or upcoming features. But the CSS community could really benefit from the spec maintainers having more active bloggers among them (e.g. like Rachel Andrew[6]) and provide a regular update of the language like 2ality does for JavaScript[7]. 1: https://stateofcss.com/ https://stateofcss.com/ 2: https://preset-env.cssdb.org/ https://preset-env.cssdb.org/ 3: https://github.com/w3c/csswg-drafts https://github.com/w3c/csswg-drafts 4: https://www.smashingmagazine.com/ https://www.smashingmagazine.com/ 5: https://alistapart.com/ https://alistapart.com/ 6: https://rachelandrew.co.uk/ https://rachelandrew.co.uk/ 7: https://2ality.com/2019/12/ecmascript-2020.html https://2ality.com/2019/12/ecmascript-2020.html
    - jraph 6y ago
      Thank you very much :-)

by jraph 6y ago

runarberg 6y ago

To be even more pedantic: It is inline outside and flow-root inside. From MDN: > The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies. https://developer.mozilla.org/en-US/docs/Web/CSS/display-inside https://developer.mozilla.org/en-US/docs/Web/CSS/display-ins...

jraph 6y ago
Ah but then it does not work as a mnemonic anymore! I'm kidding. Thanks, TIL I learned that with now have display-inside and display-outside (and flow[-root]). This makes perfect sense. Finally, even, I'd say. Having a property that defines both the behaviors of an element outside and inside without being able to define these behaviors separately was both strange and limiting. I'm happy I even used the terms that have been chosen to speak about these notions in CSS by chance. How do you track all these useful additions to CSS conveniently though? I can't rely on random comments on HN to learn about them by chance (no offense intended to your valuable comment btw, being random is perfectly fine). I also can't possibly systematically learn about each and every addition neither. Are there resources addressing this?
- runarberg 6y ago
  I recommend taking the State of CSS[1] survey, it is a nice way of keeping up with the latest features. Other then that I use PostCSS with the postcss-preset-env[2] plugin. There you can enable various future features of the language and have it compile down to a more supported version. If your really want to dive into the future of CSS you can read the issue board for the CSSWG[3] (beware, it can suck hours out of your days). Smashing Magazine[4] and A List Apart[5] also sometimes have articles about a new(ish) or upcoming features. But the CSS community could really benefit from the spec maintainers having more active bloggers among them (e.g. like Rachel Andrew[6]) and provide a regular update of the language like 2ality does for JavaScript[7]. 1: https://stateofcss.com/ https://stateofcss.com/ 2: https://preset-env.cssdb.org/ https://preset-env.cssdb.org/ 3: https://github.com/w3c/csswg-drafts https://github.com/w3c/csswg-drafts 4: https://www.smashingmagazine.com/ https://www.smashingmagazine.com/ 5: https://alistapart.com/ https://alistapart.com/ 6: https://rachelandrew.co.uk/ https://rachelandrew.co.uk/ 7: https://2ality.com/2019/12/ecmascript-2020.html https://2ality.com/2019/12/ecmascript-2020.html
  - jraph 6y ago
    Thank you very much :-)