Thank you, Chris! On Jun 19, 12:04 am, Christopher Torgalson <[email protected]> wrote: > Hi there, > > > > On Saturday, June 18, 2011 at 7:11 AM, Aranor wrote: > > I haven't found an answer to my problem anywhere, so I'll post it > > here: > > > I'm a web developer familiar with Blueprint. When I use images on my > > blueprint website, they mess up the (base)lines, and any following > > paragraphs are not aligned properly. I am using image sizes in > > multiples of 18, but there's this gap appearing after every image. > > Even Firebug doesn't seem to recognize the gap as anything. > > > What's more weird, the gap's size varies between different images from > > 3 to 5 px! After I tackled with the problem for a while, I made a > > fresh new page with no CSS or other code, only blueprint. It still > > does that. There's not really any code to show, as it happens without > > anything added besides the images. > > > I'm getting kind of desperate, because it makes no sense and I've got > > deadlines. Has anyone had similar problems with images? > > It's nothing in particular to do with Blueprint. To understand this problem, > you need to understand that images are inline-replaced elements--with the key > word being 'inline'. > > Because of this, img elements are effectively treated by the browser as if > they were text. This means, unless you specify otherwise, the bottom edge of > an img element will be aligned with the baseline of the text it's a part of > (even if there is no actual text, the img will still inherit values for > font-size, line height etc from its parent element (for the typographically > un-initiated, the 'baseline' of a bit of text is the invisible line that > letters such as abcdef 'sit' on). Because the img sits on the baseline, and > because every font makes room for the descenders of letters such as gjpq, > there's a little space under the img. > > This explains why you see different values for the little gap below the > image--the different places you're placing the images presumably have > different font sizes specified. > > In any case, having typed a long explanation, the solution is amazingly > simple: > > #some-element img { vertical-align: bottom; /* default value is 'baseline' */ > } > > -- > Chris
-- 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.
