Jump to content

Mystery bottom margin on images with DOCTYPE


melahi
 Share

Recommended Posts

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 🙂

 

2021-01-29-mp.png

Edited by melahi
typo
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...