CODEWITHSUNDEEP
htmlcss
Exoon
Exoon

Reputation: 1553

Extra spacing below image, How can i remove it?

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

Upvotes: 1

Views: 49

Answers (2)

Nandha
Nandha

Reputation: 695

Use display as inline-flex for .boxart

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

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240878

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.

Upvotes: 3

Related Questions