Because the characteristics of text elements are that they can be separated by text separators, carriage returns or spaces. For
example, img is a line-level block element, and inline-block has the characteristics of inline attributes.
The following example, there is a carriage return between img tags, and the picture is separated Exhibited
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt="">
<img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt="">
<img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt="">
<img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt="">
</body>
<style>
* {
margin: 0;
padding: 0;
}
img{
width:300px
}
</style>
</html>
Now no carriage return is set between img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt=""><img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt=""><img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt=""><img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt="">
</body>
<style>
* {
margin: 0;
padding: 0;
}
img{
width:300px
}
</style>
</html>
