Le 15 août 2014 à 03:06, Tim Dawson <t...@ramasaig.com> a écrit :
> I have a <div> containing a CSS animation of five* images which appear > sequentially. The images are absolutely positioned in a stack, except for the > first to load, which has relative positioning. That's done with the intention > of getting the containing div to wrap the images without having to set a > height. > > * There's a sixth image, last to load, which fades out initially, but then > doesn't reappear. I did this to avoid loading an image with zero opacity and > having to wait for it to fade in. There are probably better ways to do this, > but that's not the problem here. > > Margins and Padding are set to zero (except the image margin-top) so my > expectation is that the <div> will be the same size as the image plus 48px of > image top margin. > > It works except that I always get two pixels worth of the <div> background > showing at the bottom of the images, and I cannot work out why. > > You can see it at: http://webadit.co.uk/hminew3/ (site is far from complete) your first image is still in-flow and rest of the baseline of the parent div; that causes the lime background to shine through at the bottom (that is a nice colour! :-)) – it is the space reserved for descenders. .pananim img:first-of-type { vertical-align: bottom; } ought to fix it. Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
