Mystery white space underneath image tag [duplicate]

by

Look at this line of text. Notice there are no letters that breach the baseline.

Now look at the following sentence:

By just crossing the bridge he probably got away.

Note the letters j, g, p and y. These letters, known in typography as descenders, breach the baseline.

enter image description here

Source: Wikipedia.org

The default value of the vertical-align property is baseline. This applies to inline-level elements.

Your img is inline-level by default and, like text, span, input, textarea and other inline boxes, is aligned to the baseline. This allows browsers to provide the space necessary to accommodate descenders.

Note that the gap is not created by margin or padding, so it’s not easy to detect in developer tools. It’s a slight elevation of content from the container’s bottom edge resulting from baseline alignment.

Here are several ways to handle this:

  1. Apply vertical-align: bottom to the img tag. In some cases bottom won’t work, so try middle, top or text-bottom.
  1. Switch from display: inline to display: block.
  1. Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.
  1. Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.

Related:

More Related Contents:

  1. Text in my heading should be top not bottom [closed]
  2. CSS indentation not working [closed]
  3. How do you keep parents of floated elements from collapsing? [duplicate]
  4. Cut Corners using CSS
  5. Why do browsers match CSS selectors from right to left?
  6. Change div order with CSS depending on device-width
  7. Why does the outer here not completely surround the inner ?
  8. Maintain aspect ratio of div but fill screen width and height in CSS?
  9. HTML/CSS: Making two floating divs the same height
  10. What does appending “?v=1” to CSS and JavaScript URLs in link and script tags do?
  11. How to set the margin or padding as percentage of height of parent container?
  12. CSS: Control space between bullet and
  13. background: fixed no repeat not working on mobile
  14. How to make a display in a horizontal row
  15. Select dropdown with fixed width cutting off content in IE
  16. How to draw circle in html page?
  17. How to horizontally align ul to center of div?
  18. How to position a div scrollbar on the left hand side?
  19. Difference between overflow-wrap and word-break?
  20. How to vertically center a inside a div? [duplicate]
  21. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  22. Rounded corners in outlook without images
  23. @Font-face not working on mobile
  24. Same height column bootstrap 3 row responsive
  25. Skewed Borders on a Div
  26. How are `display: table-cell` widths calculated?
  27. body { overflow-x: hidden; } breaks position: sticky
  28. Prevent a centered layout from shifting its position when scrollbar appears
  29. How to keep styles after animation?
  30. overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Leave a Comment