Underlining a span element

css, html

Solution

Add `display:block;` to your span or turn the span into a div.

jsFiddle example.

Or...use display:inline-block;

jsFiddle example.

Problem

When I apply 'border-bottom' to a 'span' element to underline it and if that the 'span' has 'image' in it with 'vertical-align: middle', the border cuts across the image! Is there anyway to maintain 'vertical-align: middle' and still run the border below the 'span'? ``` <html> <head> <style type="text/css"> span.underline { font-size: 20px; border-bottom: 3px solid grey; } img.embeddedImage { vertical-align: middle; } </style> </head> <body> <span class="underline"> (a) <img class="embeddedImage" src="logo.gif"></span> </body> </html> ```

Original source