Is there a quotation mark symbol that doesn't float high above the baseline?

Question

In inspecting my web page, I see that the quotation mark ", ' or any other variant that I try finding such as “ or ” all, as you would expect, have a large white-space below them - it's normal for them to be floating above the baseline.

Is there any Unicode or HTML glyph that is just the quotation mark, not floating high above the line? I guess it's equivalent to asking, "Is there a quotation mark that is vertically centered within its box?" or "Is there a quotation mark that rests on the baseline?" which isn't very likely to exist. I've tried looking through w3.org lists and places like CSS-Tricks, but no luck.

It's a problem because when using such a glyph in vertical Flexbox layouts, there's the illusion of a large space between it and the item below.

I've tried using margin-bottom: -8px; on the quote mark to negate this, but it isn't a flexible solution, especially once I mess around with line heights.

Link to the fiddle: https://jsfiddle.net/ab6m5fvo/

Answer 1

Disclaimer:: As of February 2021, the lh unit is not supported by any mainstream browsers. Eventually it will be - but for now my answer won't work).

I've tried using margin-bottom: -8px; on the quote mark to negate this, but it isn't flexible solution, especially once I mess around with line heights.

That's what the lh unit is for.

.flexParent {
  display: flex;
  flex-direction: column;
  height: 100px;
}

.flexParent > .l {
  height: 20px;
  width: 1px;
  background-color: black;
}

.flexParent > .q {
    margin-bottom: -0.4lh; /* NOTE: The value is `-0.4 * lh`, not `-0.41 * h` */
    display: inline-block;
    width: 2em;
}

.flexParent:hover > .q {
  outline: 1px solid blue;
}

<div class="flexParent">
  <div class="l"></div>
  <div class="q">"</div>
  <div class="l"></div>
</div>