Unexpected CSS img styling

This is in a similar vein to https://github.com/gatsbyjs/gatsby-starter-blog/issues/16 & as frustratingly tweeted https://twitter.com/kaihendry/status/778166191860936704 I don’t expect style to be set here.

What is the good reason RE https://twitter.com/kylemathews/status/778262611058053126 ?

I wasted a serious amount of time over this margin-bottom:1.66667rem. In hindsight the issue was staring at me from Chrome dev tools, but I really didn’t expect typography.js to setup so much CSS. I also resent it’s uglyfying my HTML’s header and not a separate file too.

I really don’t quite understand how a modern day dev is supposed to track cascading CSS rules and override & normalise things, since it seems like I can’t assume sane defaults anymore.

[aamistak]

This issue is coming up on Google so I wanted to post the solution:

When you intialize the Typography.js object you can provide overrideStyles

new Typography({
  overrideStyles: ({ rhythm }) => ({
    img: {
        marginBottom: 0
      }
  })
})

https://kyleamathews.github.io/typography.js/

[DamianPereira]

Is there any documentation on what typography.css styles apart from text elements? I’ve just checked and it seems to reset lots of element’s margin/padding to 0 except for margin-bottom which is set to 1.45rem. Elements like form, address and so are styled. What’s the reasoning for this? It seems arbitrary and breaks my layout.

I did not expect img styling at all, and I had to search for a while before I found where the margin-bottom was coming from (suspected font awesome CSS, or normalize, but not typography).