There are a number of things about this that you may care to notice
- The images are inline (this is the natural default for images in html). See some demos of this or just read the CSS 2.1 specs or google.
- You have 607px for the total length of the line. The three pics are 21, 26, and 28 px wide. That takes up 75px of the 607px. Leaving 532px to be divided between the left and right of the middle image. That means 266px for each side of the middle image.
- It is quite important to structure the html so that there are no gaps between the img tags otherwise you will introduce white spaces and these will grow according to the font size and bugger up the calculations and make the right image drop to the next line at text size enlargement. If you don't quite follow this, see at the bottom of this page and go to "the small appendix"
- I have left the border of the container in to show you what is going on, it can be removed and no one will notice that the images are not quite at the bottom of the container. This is for the interesting reason that being inline, they sit on an invisible sort of baseline. This baseline is sort of meant for text. As you know, text has some letters like "y" and "g" that have descending bits. These bits need space and that is the space you are seeing, more or less. To see this more clearly see inline pics and descender space