1

I have the following code. Just a simple image (400px) and span nested in a button (that ends up being 407px). The button has a gray background color so you can see the height difference at the bottom (on the left button). I have cleared all margins/paddings, but I can't see where the height difference is coming from. See image

<button>
    <span>Text</span>
    <img src="image.jpg">
</button>
Faysal Ahmed
  • 7,501
  • 5
  • 28
  • 50
Grey Stephenson
  • 21
  • 3
  • Additionally, the image used in the button is dynamic so setting the image as a background-image is not a good option. – Grey Stephenson Mar 06 '18 at 04:31
  • Have you tried Chrome's dev tools? It has some very useful features that show css rules really clearly... Also it would help if you showed us what css you were using to suppress the margins/padding. – Shadow Mar 06 '18 at 04:32
  • @Shadow yes, certainly. Still no clue. Go here and you can see it happening: https://jsfiddle.net/gds0yh5e/ – Grey Stephenson Mar 06 '18 at 04:37
  • This is a duplicate, but images are inline items, and so sit on a line just like text. You get around this by switching it to `display: block;`, so it no longer sits on the baseline but behaves like a block level element. – denmch Mar 06 '18 at 04:45
  • @Denmch thank you for the response. However this did not work. Any thoughts? – Grey Stephenson Mar 06 '18 at 14:54
  • But it does work, unless I misunderstood you: https://jsfiddle.net/gds0yh5e/5/ – denmch Mar 06 '18 at 18:12

0 Answers0