3 ms·

I don’t thnk the author’s recommendation to include img { display: block; } in your reset is generally a good idea. It will break some commo

I don’t thnk the author’s recommendation to include img { display: block; } in your reset is generally a good idea. It will break some common uses of images, for example to hold bits of math inline with the text when you are not using mathjax. If you want a displayed image, you should wrap it in a <figure> tag, which will give you a block element.

chrismorgan 6y ago
If you wrap an image in a figure, but leave the image still inline, you’ll probably get a few pixels of extra space at the bottom of the image due to line-height and vertical-align. People find that really confusing. With how most people use images, I agree that `img { display: block; }` is what you want >99% of the time, and would rather people reverse it for the rare occasion when they want something else. (BTW, doesn’t MathJax emit SVG? Viz., not <img> anyway.)
- leephillips 6y ago
  I’m confused by your reply. Did your eye skip over the word “not” in my comment?
  - chrismorgan 6y ago
    Sorry, you are correct. Drop the final parenthetical, then, but I stand by the rest.
    - leephillips 6y ago
      Yes, your other point was something I hadn’t thought about. I guess his advice would be good for some people, but I’m not sure about the 99%. It’s not uncommon to use small images as text-like elements, and when you do that, if you have this reset, you will need to explicitly make them inline. Not a huge deal, but people tend to copy and paste their own CSS libraries between projects, and redefining basic default semantics of elements may create confusion and extra work down the line when things don’t behave the way that any documentation you may consult assumes.
      - chrismorgan 6y ago
        I’m going to stick with the >99% figure. I think it is uncommon, rare even. Other than chat systems with custom emoji rendered as an img, I honestly can’t think when I last saw a site with inline <img> tags. (I’d guess it to be within the last month, maybe even the last week, but it wouldn’t surprise me if it wasn’t.) Twenty years ago, sure, but they’ve gone out of fashion stylistically as well as technically. Technically, I suspect background-image and icon fonts are both used more commonly for small iconography.
        leephillips 6y ago
        It depends on what kind of sites you tend to visit, I guess. I see this several times per day. But I often visit pages with math on them. Before mathjax became standard, inline images was the only way to do it. And visit any Wikipedia page with math: they use mathML and have fallbacks, but the end result is, you are looking at inline images. Also, I often see such things as sparklines and similar things, also inline images. The >99% may be true of what you consume, but without data I am skeptical about the numbers. Also, some people use CMSs that substitute inline images for missing Unicode glyphs, and other things. If it’s done well, you may not even notice. You don’t know if the correct figure is 99% unless you have examined the source of a sample of sites.
- runarberg 6y ago
  Something like this then: figure img { display: block; } figure figcaption img { display: inline; }
mikewhy 6y ago
Yep, this stood out to me too. Drives me absolutely nuts when an element you expect to be inline is now suddenly block. Especially because the author's reasoning is "it can cause confusion when trying to position them or add vertical margins", after just explaining that with inline-block "you can apply vertical margins to these".

chrismorgan 6y ago

If you wrap an image in a figure, but leave the image still inline, you’ll probably get a few pixels of extra space at the bottom of the image due to line-height and vertical-align. People find that really confusing. With how most people use images, I agree that `img { display: block; }` is what you want >99% of the time, and would rather people reverse it for the rare occasion when they want something else. (BTW, doesn’t MathJax emit SVG? Viz., not <img> anyway.)

leephillips 6y ago
I’m confused by your reply. Did your eye skip over the word “not” in my comment?
- chrismorgan 6y ago
  Sorry, you are correct. Drop the final parenthetical, then, but I stand by the rest.
  - leephillips 6y ago
    Yes, your other point was something I hadn’t thought about. I guess his advice would be good for some people, but I’m not sure about the 99%. It’s not uncommon to use small images as text-like elements, and when you do that, if you have this reset, you will need to explicitly make them inline. Not a huge deal, but people tend to copy and paste their own CSS libraries between projects, and redefining basic default semantics of elements may create confusion and extra work down the line when things don’t behave the way that any documentation you may consult assumes.
    - chrismorgan 6y ago
      I’m going to stick with the >99% figure. I think it is uncommon, rare even. Other than chat systems with custom emoji rendered as an img, I honestly can’t think when I last saw a site with inline <img> tags. (I’d guess it to be within the last month, maybe even the last week, but it wouldn’t surprise me if it wasn’t.) Twenty years ago, sure, but they’ve gone out of fashion stylistically as well as technically. Technically, I suspect background-image and icon fonts are both used more commonly for small iconography.
      - leephillips 6y ago
        It depends on what kind of sites you tend to visit, I guess. I see this several times per day. But I often visit pages with math on them. Before mathjax became standard, inline images was the only way to do it. And visit any Wikipedia page with math: they use mathML and have fallbacks, but the end result is, you are looking at inline images. Also, I often see such things as sparklines and similar things, also inline images. The >99% may be true of what you consume, but without data I am skeptical about the numbers. Also, some people use CMSs that substitute inline images for missing Unicode glyphs, and other things. If it’s done well, you may not even notice. You don’t know if the correct figure is 99% unless you have examined the source of a sample of sites.
runarberg 6y ago
Something like this then: figure img { display: block; } figure figcaption img { display: inline; }

mikewhy 6y ago

Yep, this stood out to me too. Drives me absolutely nuts when an element you expect to be inline is now suddenly block. Especially because the author's reasoning is "it can cause confusion when trying to position them or add vertical margins", after just explaining that with inline-block "you can apply vertical margins to these".