I have an image and some text beside it in a table. The HTML looks like this:
<table>
<tr>
<td>
<img src="b.png" alt="B" class="the-b">
</td>
<td>
<h1>WHY</h1>
<h2></h2>
<p>BUT WHY THOUGH</p>
</td>
</tr>
</table>
Without any styling on the image except a yellow background, the text in the table rests right alongside the image, like this: no resizing
However, if I add this CSS to the image, there is a big white space between the image and text:
.the-b {
width: 10%;
height: auto;
}
See resized.
Even if I change the padding and margin to 0, this stays the same. It looks as though the image is taking up the same amount of space no matter what size it is, and even though the background color is confined to the visible image.
If I use an image with smaller dimensions, the text rests against it until I resize it, so I know it's not some table default size. But, if I just put text beside the image, the resizing whitespace issue disappears, so it must be a combo of the table with CSS width: x%.
What is creating this whitespace? Is it normal for CSS image resizing to hold the original image size space this way (if that's what's happening)?
