melahi Posted January 29, 2021 Share Posted January 29, 2021 (edited) I am getting inexplicable bottom margin under all my images. Developer Tools didn't associate it with anything and I spent ages looking for a logical explanation, but to no avail. No doubt once I find out, I will slap my head and say DOH! Simpson style, but at the moment I'm baffled. By pure coincidence I made a typo and suddenly it disappeared. The mystery margin is associated with having a <!DOCTYPE html> statement and now I'm forced to leave that out to make my site work. I'm hoping someone can shed light on this. Here is a screen shot, one with and one without the DOCTYPE: notice the golden bar under the image in the first one. I whittled the page right down to just a few lines and you can see it here: http://ngaro.online/mp.html - the mystery padding due to DOCTYPE http://ngaro.online/mpok.html - the mystery padding vanishes without DOCTYPE IDK if it's worth me posting the trivial code as you can just click on "view source" to see it. Thanks in advance for any suggestions 🙂 Edited January 29, 2021 by melahi typo Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2021 Share Posted January 29, 2021 its a vertical-align issue, of all the ones to give it, they give it one that give a space at bottom. many ways to fix it, change default vertical-align, display: block, for img, font-size: 0; line-height: 0; for parent. 1 Link to comment Share on other sites More sharing options...
melahi Posted January 30, 2021 Author Share Posted January 30, 2021 3 hours ago, dsonesuk said: its a vertical-align issue, of all the ones to give it, they give it one that give a space at bottom. many ways to fix it, change default vertical-align, display: block, for img, font-size: 0; line-height: 0; for parent. Thank you ever so much! I used vertical-align:text-top; on my container class and now it works with videos as well! Once you explained I did indeed say "Doh!": That space was there for potential character descenders (am I right)? I kept the font size and line height normal as I overlay captions on my images and if anyone wants to see the web theme engine I'm developing, it gets tested online here: http://ngaro.online/ Link to comment Share on other sites More sharing options...
dsonesuk Posted January 30, 2021 Share Posted January 30, 2021 Sort of, but even stacking of elements will cause linebreak which is treated as space and therefore a alignment problem. You get a similar problem in using display: inline-block; it usually results in a gap following it. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted January 30, 2021 Share Posted January 30, 2021 It is exactly the space left for hanging letters. This space appears beneath all inline and inline-block elements. Horizontal space to the left or right of inline elements is just the browser representing whitespace. 1 Link to comment Share on other sites More sharing options...
melahi Posted January 31, 2021 Author Share Posted January 31, 2021 1 hour ago, Ingolme said: It is exactly the space left for hanging letters. This space appears beneath all inline and inline-block elements. Horizontal space to the left or right of inline elements is just the browser representing whitespace. Actually struggling with another problem and it's possible I can solve it using this as a feature but at the moment it's giving the wrong priority to spacing vs word wrap. I'll ask it in another if that's OK as this one is currently doing what I want. 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