Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "HTML how to solve the small gap under the img tag". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "HTML how to solve the small gap under the img tag" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

Code:

.box {

border: 2px solid red;

}

And why?

img is a tag element similar to text. At the end, a blank character (anonymous text) will be added at the end, resulting in an extra 3px spacing below. In fact, we add a span to wrap the text on the right side of img, which will be more obvious.

There are five ways to solve these problems.

The first method:

Set div to the same height as img;

Disadvantages: This method is not flexible enough, once the img size changes, we have to reset the div height

The second method:

Set vertical-align to a value other than baseline for img

The third method:

Add display:block; to img

This method is more commonly used, but it should be noted that once img is set to block, text-align:center; will no longer take effect, and the horizontal center of the picture should use margin:auto;

The fourth method:

Set float for img

Setting float keeps img out of the document flow

Cons: Parent height is not automatically expanded by img

The fifth method:

font-size:0;

Disadvantages: This method will make the text disappear in div

Read here, this article "HTML how to solve the img tag below the small gap" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more about the content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.