I have been at this for about 6 hours now, and somehow it doesn't seem to work.
I have a few lines of text, and two 16x16px icons that sit next to eachother. Each set has its own <div> tag (with classes images and text) The icons should go to the top left, and the text should flow around it. The flow works, by using "float:left;" on the first image. However, there is an abnormal large whitespace below the images. I have tried setting the bottom margins of every element to 0px, but the whitespace remains. It works by setting a negative value to the "margin-bottom", but that can cause problems when text is smaller.
Before this, i didnt use the <divs> and that worked. At that time, there is a subtle larger bit of whitespace between the 1st and 2nd line of text, so that it flows around and below the images without too much whitespace. I think the browsers add this small space between that 1st and 2nd line on their own. Why can't it do that when it is all inside <div>'s?
Browsers have certain styles applied by default. In this case, you didn't use a CSS reset of any kind so the browser itself inserts top margin on the <p> tag. Declaring margin: 0; on the <p> would get rid of the extra space on top of the images.
Regarding space below the images, this just depends on the image height and your line-height for your text, by default determined by the font size used. For your particular example, since the images are 16px in height, declare a line-height: 16px; to your wrapper <div>. This will ensure all the spacing between lines are uniform and that the two images sit comfortably on one line.
That doesn't work, because the white space stays. I have added another example below the original one, where the complete content (images and text) all sit within the same <div>, so no longer individual divs for every component. There you can see that the browser, on its own, ads a subtle bit of whitespace below the 1st and 2nd line, which results in the 2nd line flowing much closer to the bottom of the images. Why can't the browser just do this for divs as well?
The 2nd example has always been correct, as that loads everything in the same div. But the 1st example is what it should be... every image and text in its own div, but then without the bottom whitespace. Is that what you changed in your top section?
Ah yes i see it now. But the line-spacing:16px means there's too much space between the lines now, which looks a bit 'off'. I'll think of some other way to do this, maybe make the icons a little smaller.