The height of the picture is 40px, and then wrap an img tag under the a tag. Why is the height of the a tag smaller than the height of the img tag, and the height of the a tag is 21px?

40px,<a><img>,<a><img>
<a>21px?
:
JSBIN:https://jsbin.com/fokuyamijo/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{ margin:0; padding:0;}  
  </style>
</head>
<body>
  <a href="">
    <img src="http://file.baixing.net/201709/cdfc1b368dfeb5198a5bf25f9ab30e91.png" alt="">
  </a>
</body>
</html>
:
<img>:


Jun.21,2022

The answer adopted by

is not very accurate.

a tag is an inline element, which in theory cannot be used as a container to wrap other elements

this statement is unfounded. Nested inline level elements are allowed and recommended, as shown in MDN and WHATWG .

to understand why there are two high levels of understanding of the concept of IFC.

  1. here is a non-replacement element at the inline level, which transparently participates in the IFC declared by < body > .
  2. inside
  3. is an inline-level replacement element that passes through transparent in the same IFC in an opaque manner.

the calculation height of non-replacement elements at the inline level is only related to font, margin, padding, and border. Because is not empty, this minimum height is determined by an imaginary box called strut .

so how are the last two heights arranged?

inline boxes (inline box) are row boxes (line box) arranged horizontally in IFC, so the overall height calculation here is row height calculation . To sum up too simply is to line up the boxes one by one to take the highest and lowest positions.

you can imagine cutting . If there are other inline elements around , they will also calculate the height according to their respective boxes.


when you set css to the a tag, font-size:0 , you will be surprised to find that the a tag has lost its height, so, you know.

Update: I'll write you a complete one when I get off work, so I don't have to keep asking questions.

The

a tag is an inline element and cannot be used to wrap block-level elements.
since an is an inline element, its height is naturally not affected by its wrapped child elements, and the minimum height set by the browser to the inline element is 21px, because a contains content, but it is a picture, so the natural height of an is 21px.

if you want to solve this problem, a {dispaly:inline-block;font-size:0}
everything ok, go home
from work.


a tag is an inline tag, and the height of the inline tag cannot be changed

if you want the a tag to have the same height as the img tag, just set the a tag as a block element

a{
    display: block;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36d9b-2b7c4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36d9b-2b7c4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?