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>
Add
display:block;to your span or turn the span into a div.jsFiddle example.
Or…use display:inline-block;
jsFiddle example.