Detailed explanation of the spacing problem between img tags

IMG tag basic analysis In HTML5, the img tag has four elements:

(1) src: image path (2) width:
(3) height:
(4) alt:

The role of alert:

When an error occurs in an image, use the function in alt to indicate the error content for easy search engine crawling (convenient for search engine crawling and SEO rendering)

Note:

(1) The width and height set for img must be the original size of the image. (2) Generally, inline elements cannot set width and height. Although img is also an inline element, it is a replaced element and can be set through src.

The difference between inline elements and inline elements.

How to solve the spacing problem between inline elements:

The reasons for the upper and lower gaps in the inline elements in the figure below are:

img is an inline element => inline elements will generate line breaks in the element code by default (also called whitespace => can also be used as a text string by default)

The reason for the vertical gap between inline elements in the following figure:

The default baseline alignment of inline elements causes empty nodes to appear (vertical-align: baseline;)
What is baseline alignment?
Acts in vertical and horizontal ways. What is a blank node?
The cause of blank nodes in the vertical direction: because the img inline element may be treated as a string in the browser, it may be affected by the front-size font size, and line-height will also affect the blank node => When adding an image, there will be an extra blank line below, which is the role of the blank node

Solution 1:

Because inline elements are treated as strings, you can add a font-size: 0 to the parent; the alignment becomes: vertical-align: middle; but this may cause problems with the text style in the parent

Solution 2:

Use display to change from an inline element to a block-level element:

Note: vertical-align and line-height are the two most difficult knowledge points to understand in CSS: Why can font-size = 0 be changed? Can the blank node of img be made to disappear?

Text and image example: Use span tags with images

The alignment of the two inline elements is vertical-align: baseline; it is obvious that the text exceeds the baseline of the image.

In the following figure, the text size is changed, and the vertical gap between the images also increases.

Causes:

The text will have a default line height, which causes vertical spacing between the text. The larger the text, the larger the spacing. => When "vertical-align: miiddle;" is used, the text position will rise and no spacing will be generated as shown below

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.