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

Front-end css html
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
  2. 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;
}

Previous: Eslint configuration issu

Next: The use of iview tree on-select-change events

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu