0

I have a small inline svg image that gets pushed outside its container for some reason. There is nothing setting the height of the container except the svg itself.

See it here https://jsfiddle.net/xv5jeLpk/4/

<div class="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 8">
  </svg>
</div>

The red background of the container div should not be visible.

einord
  • 2,278
  • 2
  • 20
  • 26

1 Answers1

3

You can get rid of the white space on top and bottom by using display: block on your svg, which by default is displayed inline. The additional space comes from the default line-height of the outer container, which is greater than the height of the svg.

Marvin
  • 9,164
  • 3
  • 26
  • 44
  • Thank you! Why didn't I think of that? – einord Jan 09 '17 at 17:24
  • Interesting. What you suggest works; I wondered if changing line-height to 1; would work, and it does have an effect, but does not cure the whole problem... goes from 4px bigger to 2px bigger. Curiously, this seems to only affect SVG children (maybe all natively inline children?), but does not affect not
    with display: inline-block; which seems inconsistent.
     – Victoria Feb 11 '17 at 10:15
  • Hmm. This workaround doesn't seem to work if the container is a flex box. :( – Victoria Feb 11 '17 at 10:34
  • @Victoria for me it's also [working with flex](https://jsfiddle.net/xv5jeLpk/19/) (`display: inline-flex` on the `.button` and there is not even the need for `display: block` on the svg then). But you might want to create a new question on stackoverflow to describe your specific setup and show in detail what is not working :) – Marvin Feb 11 '17 at 10:42
  • @Marvin thanks for the encouragement. I tweaked line-height to .5, and that cured it, maybe. More experimentation required. My flexbox was vertical, maybe that makes a difference. Or maybe the inline-flex helped. – Victoria Feb 11 '17 at 10:47
  • @Victoria the value for the line-height gets multiplied with the current font-size of that element (you are probably aware of this). For debugging and reducing rounding issues you might want to use pixels for the line-height. In the example from this question the svg's height is explicitly set to 9px. You can set the line-height of `.button` to 9px and you'll see that it gets 2px higher than the SVG, which is a result of the [vertical-alignment and baseline properties](http://stackoverflow.com/a/17905828/3162554). I Hope the link helps a little as I'm not an expert on this topic :) – Marvin Feb 11 '17 at 11:17