The principle of the distance between img Tags

Time:2020-9-18

Basic analysis of img tag in HTML5: four elements of img Tag Image:

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

The effect of alert is as follows

When there is an error in the image, the function in ALT is used to represent the error content, which is convenient for the search engine to grab (convenient for the search engine to grab, and convenient for the SEO rendering)

matters needing attention:

(1) The width and height set by img must be the original size of the picture
(2) Generally, the width and height of an inline element cannot be set. Although img is also an inline element, it is a replacement element. You can set the width and height independently through Src
 

The difference between an inline element and an inline element.

How to solve the problem of spacing between the elements in the line:

In the figure below, the reasons for the upper and lower gaps of the inline elements are as follows:

IMG is an inline element = > the inline element will generate the newline character in the element code by default (also known as blank character = > can also be used as a text string by default)

In the figure below, the reasons for the gap in the vertical direction of the inline elements are as follows:

The default baseline alignment of inline elements results in null nodes appearing (vertical)- align:baseline; )
What is baseline alignment?
Acting on the vertical, horizontal way
What is a blank node?
Acting on the vertical direction
Causes of blank nodes: because img inline elements may be treated as strings in the browser, they may be affected by the font size of front size, and line height will also affect blank nodes = > when adding images, a blank line will appear below, which is the role of blank nodes

Solution 1:

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

Solution 2:

Use display to change from in line elements to block level elements

Note: vertical align and line height are the two most difficult knowledge points to understand in CSS: why can you change font size = 0; can make the blank node of img disappear

Text and picture example: use the span tag with the picture

The alignment of the two inline elements is vertical align: baseline; obviously, the text is beyond the baseline of the image


 

As you change the size of the text in the figure below, the gap in the vertical direction of the picture will become larger
 

The causes are as follows:

Text will have a default line height, resulting in vertical space between the text. The larger the text, the larger the space will be = > when using “vertical align: miiddle;”, the space will not be generated when the text position rises, as shown in the figure below

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.

Recommended Today

Analysis of super comprehensive MySQL statement locking (Part 1)

A series of articles: Analysis of super comprehensive MySQL statement locking (Part 1) Analysis of super comprehensive MySQL statement locking (Part 2) Analysis of super comprehensive MySQL statement locking (Part 2) Preparation in advance Build a system to store heroes of the Three KingdomsheroTable: CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY […]