Extra spacing below image, How can i remove it?

Question

I've got a div to show an image and I want the div to wrap around the image without putting the actual size in the CSS so I can make the image size bigger/smaller and the div just wraps around whatever.

Here is my CSS:

.boxart {
    padding:1px;
    background-color: #e3e3e3;
    border: solid 1px #cacaca;
    position: relative;
    display: inline-block;
}
.overImage {
    position: absolute;
    background-color: #fff1ce;
    padding: 3px;
    margin: 2px 0px 0px 60px;
    border: 1px dashed #111111;
}

My HTML:

<div class="boxart">
  <div class="overImage">Upload Boxart</div><img width="220" height="200" src="img-url" />
</div>

enter image description here

score 3 · Accepted Answer · edited May 23 '17 at 11:43

Here are two different ways to remove the space below the img:

Change the vertical-align property of the img to something like top:

Example Here
```
.boxart > img {
    vertical-align: top;
}
```
Alternatively, you could change the display of the img to block.

Example Here
```
.boxart > img {
    display: block;
}
```

The reason why both of these approach work:

An img element is inline by default.

There is reserved whitespace for inline elements for letters such as f, j, p and q that extend beyond the height of other letters (i.e., letters that hang lower / stand taller..). By changing the vertical-align property to something other than the default value of baseline, the whitespace is removed. By changing the display of the element to block, the vertical-align property no longer has an effect on the element as it is no longer inline.

Thanks, any preference to which to use or is there no advantage / disadvantage to either? — Exoon, Feb 15 '15 at 17:49
@Exoon In this case, it really doesn't matter since both solutions work. But i'd probably go with `vertical-align: top` because you maintain the inline behavior of the image. — Josh Crozier, Feb 15 '15 at 17:56

score 0 · Answer 2 · answered Feb 15 '15 at 18:55

0

Use display as inline-flex for .boxart

Inline-flex helps their child tags to fit the parent tag space either by shrinking or growing.

answered Feb 15 '15 at 18:55

Nandha

655
1
6
14

Extra spacing below image, How can i remove it?

2 Answers2