davej Posted August 2, 2013 Share Posted August 2, 2013 I noticed an issue some time back that Dsonesuk helped solve. In that situation I had some images wrapped in anchor tags inside a table, and there was this little oddball gap below the images. The solution pointed out by Dsonesuk was to set the line-height to a small value. This seemed to solve the problem and I put it out of my mind, but now recently I have run the same problem and would like to understand it a little better. As the code below demonstrates the red box which hangs out of the images creates an interference problem. It acts like an unwanted bottom-margin on each image. What is the optimum way to kill that red box? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>icon test</title><style>* {margin:0;padding: 0;}div{width: 200px;height: 100px;border:1px solid gray;text-align: center;}div a {border: 1px solid red;font-size: 8pt;}div a img {width: 40px;height: 40px;margin: 0;padding: 0;opacity: 0.75;border: 1px solid green;}#logo {width: 150px;}</style></head><body><div> <a href="#"> <img src="http://w3schools.invisionzone.com/uploads/profile/photo-thumb-31017.jpg" alt="1"/></a> <a href="#"> <img src="http://w3schools.invisionzone.com/uploads/av-19529.jpg" alt="2"/></a> <a href="#"> <img src="http://w3schools.invisionzone.com/uploads/profile/photo-thumb-44772.jpg" alt="3"/></a> <a href="#"> <img id="logo" src="http://w3schools.invisionzone.com/public/style_images/1_logo.png" alt="4"/></a></div></body></html> Link to comment Share on other sites More sharing options...
leev18 Posted August 2, 2013 Share Posted August 2, 2013 What is the optimum way to kill that red box? You want to remove it? If so, then remove "border: 1px solid red;" and "border: 1px solid green;" Link to comment Share on other sites More sharing options...
Ingolme Posted August 2, 2013 Share Posted August 2, 2013 Images are inline, so they behave like text. A line of text leaves a small gap below it to fit letters like g, y and j which have parts that go below the baseline. My preferred solution is to set the vertical-align of the image's container to "middle" forcing the text to align itself to the middle of other inline elements, such as images, rather than putting their baseline at the baseline of the image and leaving that gap. You want to remove it? If so, then remove "border: 1px solid red;" and "border: 1px solid green;" Yes, that would remove the symptoms, but not solve the actual problem. Link to comment Share on other sites More sharing options...
davej Posted August 2, 2013 Author Share Posted August 2, 2013 You want to remove it? If so, then remove "border: 1px solid red;" and "border: 1px solid green;" No, the red border just indicates the area of the problem. Notice that the images are behaving as if they had margin-bottom enabled even though all margins and padding are set to zero. Link to comment Share on other sites More sharing options...
davej Posted August 2, 2013 Author Share Posted August 2, 2013 Images are inline, so they behave like text. A line of text leaves a small gap below it to fit letters like g, y and j which have parts that go below the baseline. My preferred solution is to set the vertical-align of the image's container to "middle" forcing the text to align itself to the middle of other inline elements, such as images, rather than putting their baseline at the baseline of the image and leaving that gap. I like it. Thanks. Strange that it has to be applied to the image rather than the anchor or the div. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>icon test</title><style>* {margin:0;padding: 0;}div{width: 200px;height: 100px;border:1px solid gray;text-align: center;/*font-size: 0; /***********************possible solution*****************//*line-height: 0; /*******************possible solution*******************//*vertical-align: middle;/*************failure*******************/}div a {border: 1px solid red;/*font-size: 0; /**********failure although it affects border line***********//*line-height: 0; /*******************failure*******************//*vertical-align: middle;/*************failure*******************/}div a img {width: 40px;height: 40px;margin: 0;padding: 0;opacity: 0.75;/*border: 1px solid yellow; /**removed for clarity**//*font-size: 0; /***********************failure*****************//*line-height: 0; /*******************failure*******************/vertical-align: middle;/***********possible best solution************/}#logo {width: 150px;}</style></head><body><div> <a href="#"> <img src="http://w3schools.invisionzone.com/uploads/profile/photo-thumb-31017.jpg" alt="1"/></a> <a href="#"> <img src="http://w3schools.invisionzone.com/uploads/av-19529.jpg" alt="2"/></a> <a href="#"> <img src="http://w3schools.invisionzone.com/uploads/profile/photo-thumb-44772.jpg" alt="3"/></a> <a href="http://www.w3schools.com/cssref/pr_pos_vertical-align.asp"> <img id="logo" src="http://w3schools.invisionzone.com/public/style_images/1_logo.png" alt="4"/></a></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now