Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Why does an <img> within a <div> display a narrow gap at the bottom?

Hi All

I have placed an <img> within a <div>.

Here's the HTML:

[CODE lang="html" title="img in a div - HTML"]

<div class="box">
<img class="height200"
src="https://picsum.photos/200/200?random=1">
</div>
[/CODE]


Here's the CSS:

[CODE lang="css" title="img in a div - CSS"]

.box
{
display: inline-block;

margin: 20px;

border: 1px solid blue;
}

img
{
width: auto;

border: 1px solid gray;
}

.height200
{
height: 200px;
}
[/CODE]

A small gap is left at the bottom between the <img> and the <div>.

I've tried this on both Firefox as well Chrome (current versions updated automatically by the browsers themselves).

I'd like to ask:
1) Why does this happen?
2) How can this gap be eliminated?

Thanks.

Steven
 
A good thing to do is to add CSS resets to your project so styles remain consistent across browsers.

As the above link says, it's to do with how images are treated as inline objects. Add display: inline-block; to all img tags is a pretty handy thing to do as it'll sort this out for you quickly and easily.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom