0

Why do the div with the classname first have 2px more than the image.(Inspect from Google Chrome), even though I set the line-height to 1, which mean the line gap is 0.(div tag with second classname have the correct height.)

Code

.first {
  background-color: blue;
  line-height: 1;
}

.first>img {}

.second {
  background-color: red;
  line-height: 1;
}

.second>span {
  display: inline-block;
}
<div class="first">
  <img src="https://png.pngtree.com/png-vector/20190710/ourmid/pngtree-user-vector-avatar-png-image_1541962.jpg" alt="any picture">
</div>
<hr>

<div class="second">
  x<span>x</span>
</div>
A-Tech
  • 806
  • 6
  • 22
ssayno
  • 51
  • 7
  • There are many reasons. IT has its own default display type, margin, padding , height and varies in different operating systems, browsers and devices. Best thing is to create a reset.css and ensure both the image and div are display: block or inline-block. – Steve Tomlin Feb 20 '23 at 11:21
  • `img{display:block}` also a solution. – Anil kumar Feb 20 '23 at 12:12

0 Answers0