Hi,
On Tue, Jun 22, 2010 at 9:20 AM, Nick <[email protected]> wrote:
> Hi,
>
> I have an image that spans my container div 950px but the is some
> unexpected white space between it and the divs below. I've tried
> pretty much everything I can think of like: enclosing the img in a div
> with span-24 (as below) removing the span-24 div and letting hang on
> it's own between divs. setting padding to zero. It does not look like
> padding or margin in firebug. Any ideas?
>
> Here is the markup:
> http://gist.github.com/448685
By the description, it's probably because you've failed to take
account of the fact the img elements are inline-replaced elements.
This means that, unless you specify otherwise, the base of the img
sits *on the baseline* of the inline text box of the parent element
(there doesn't need to actually be any text in that element for this
to happen).
To stop this happening, you need, according to circumstances, to do
one of the following:
/* Option 1 */
.foo img { vertical-align:bottom; }
/* Option 2 */
.foo img { float:left; }
In the first case, the image will just move to the bottom of the
inline text box of the parent element. This is usually all it takes.
But in certain circumstances, you may need to float the img (as in the
second case, above). This takes the img element out of the flow of the
document (but may cause other unintended problems).
--
Christopher Torgalson
http://www.typo3apprentice.com/
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
