SVG inside span isn't on the same line as the text

Question

I have an SVG file inside a span with text at the same time. The text and the SVG are the same height. However, the SVG isn't on the same line as the text.

Relevant jsfiddle: https://jsfiddle.net/tcrnjd53/

As you can see, the facebook logo needs to be on the red dotted line, just like the sample text.

span {
  font-size: 1em;
  border-bottom: 1px dotted red;
  zoom: 3; /* for easier readability */
}

span svg {
  fill: #3b5998;
  height: 1em;
}

Sample Text

user_6231153 · Answer

The default vertical-align property is baseline - change it to bottom. See demo below:

span {
  font-size: 1em;
  border-bottom: 1px dotted red;
  zoom: 3; /* for easier readability */
}

span svg {
  fill: #3b5998;
  height: 1em;
  vertical-align: bottom; /* ADDED */
}

Sample Text

Admin · Answer

CSS vertical-align property could help as shown in the snippet. Choosing the appropriate value is up to you. To better understand what i mean do try the following values top,text-top,middle,bottom,text-bottom and see the differences. You could apply a fixed or percentage value if is best suited.

span {
  font-size: 1em;
  border-bottom: 1px dotted red;
  zoom: 3; /* for easier readability */
}

span svg {
  fill: #3b5998;
  height: 1em;
  /*
  vertical-align:text-top;
  */
  vertical-align:-0.1875em;
}

Sample Text

user_6314639 · Answer

The previous solutions don't work when the line-height is different than the font-size. In order to handle that cases properly, use text-bottom instead of bottom.

span {
  font-size: 20px;
  line-height: 30px;
  border-bottom: 1px dotted red;
  zoom: 3; /* for easier readability */
}

span svg {
  fill: #3b5998;
  height: 1em;
  vertical-align: text-bottom;
}

Sample Text

SVG inside span isn't on the same line as the text

3 Answers