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
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