What causes the gap between the image and div when the height of the div is adjusted?

Question

What causes the gap between the image and div when the height of the div is adjusted?

Here is a simple HTML structure:

<div> <img style="width:100%;height:100%"/> </div>

The div appears like this in Chrome:

https://i.sstatic.net/pIFRf.png

However, there is a gap between the div and the image:

https://i.sstatic.net/5RobX.png

I noticed that the image is supposed to cover the entire div,

If I increase the height of the div by more than 10px, everything looks perfect.

https://i.sstatic.net/2ATyV.png

Now, the image covers the whole div:

https://i.sstatic.net/nBdxa.png

Upon testing, it was observed that if the height of the div is less, the gap becomes larger.

So what could be the issue here?

Provided below is an example snippet of code from my project for reference. You can refer to the image using Chrome Dev Tools:

javascript html css image

Answer 1

Answer №1

Consider using this code snippet:

img {
  vertical-align: top;
}

This is recommended because the default value for vertical-align on img elements is baseline.

For more information, check out the following link: vertical-align

Answer 2

Consider using this code snippet:

img {
  vertical-align: top;
}

This is recommended because the default value for vertical-align on img elements is baseline.

For more information, check out the following link: vertical-align

Answer 3

Answer №2

@Zange-chan, your understanding is a bit off. When you set the position of an element to "absolute," it will indeed be removed from the DOM flow but it will still contain its child elements. The solution to this problem is simple - just set the display property of the img element to block. Give it a try:

img {
   display: block;
}

Answer 4

@Zange-chan, your understanding is a bit off. When you set the position of an element to "absolute," it will indeed be removed from the DOM flow but it will still contain its child elements. The solution to this problem is simple - just set the display property of the img element to block. Give it a try:

img {
   display: block;
}

What causes the gap between the image and div when the height of the div is adjusted?

Answer №1

Answer №2

Similar questions

SVG to create a gradient mask that appears transparent

When you use ReactDOM.render inside a <div>, it does not instantly generate HTML code

Dynamic updating of scores using Ajax from user input

Is it possible to incorporate a button and a click event into this JavaScript function?

The functionality of -moz-background-clip:text is not functioning properly on Firefox browsers

"Learn the step-by-step process of retrieving the height and width of a user's

AngularJS - Textarea not resetting content on ng-click event

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

Having difficulty in getting rid of the horizontal scrollbar

The UI Router template fails to inject despite state changes occurring

Guide on showing string array values in an alert popup using JavaScript

Splitting with Regex - One Time Operation

Maximizing the potential of a cell in a table

I am trying to figure out how to properly utilize server-only functions within Next.js middleware

The functionality of ItemSliding appears to be disabled when used in combination with

Encryption: JavaScript security

How can you effectively transfer a parameter from .run to .config?

query in PHP to display specific data

How can I resolve the issue of event listeners in a for loop executing concurrently instead of sequentially?

Encountering null injector errors when running ng test on an Angular application