Solve the way to solve the gap between the IMG label

Author：Eve Cole Update Time：2025-03-04 07:32:02

In the usual development process, we often need to use multiple pictures. When using multiple pictures, we generally use a list to install our IMG.

 <! Doctype html> <html Lang = EN> <gead> <meta charset = UTF-8> <Title> Document </title> <Style Type = Text/CSS> IMG {Height: 200px: 0; padding Besides 0; Border-BOTTOM: 1px solid red;} Ul {border: 1px solid blue; list-style: none; padding: 0; margin: 0;} </style> </head> <ul> <li> <li > <IMG SRC = Lipeng.png> </li> </ul> </body> </html>

But at this time we found a problem, why is there an extra line under my picture?

What is going on?

Didn't I have clear the outer and inner border between IMG?

In fact, this is actually a ghost that Inline elements.

Any visible element that is not a block -level element is an internal associated element, and the characteristic of its performance is the form of line layout. ---- "CSS Authoritative Guide"

What's the meaning?

This means that in fact, such as picture text and other internal association elements, it is aligned with its parent Baseline, but you are aligned with Baseline. ), This will definitely cause a certain gap, that is, the problems we have above.

Since we know the reason for this problem, it is much simpler to solve it.

1. The first solution

Since it is the Inline element, this problem can naturally solve this problem simply and rudely, that is, to change our element to personalized personality, can it be changed from Inline to block?

 <Style Type = Text/CSS> IMG {Height: 200px; Margin: 0; Padding: 0; Border-Bottom: 1px solid red; display: block;} Ul {border: 1px solid block; list- style: none; padding : 0; margin: 0;} </style>

2. The second solution

This is too rough, the gender is changed, how can we play happily back, so we have to try the curve to save it. We can modify its vertical alignment method. Is this okay?

 <Style Type = Text/CSS> Img {Height: 200px; Margin: 0; Padding: 0; Border-Bottom: 1px solid red; vertical-align: middle;} UL {border: 1px solid blue ; List-Style: None ; padding: 0; margin: 0;} </style>

It can be seen that this can also achieve the desired results.

The reason is that the default attribute of Vertical-Align is Baseline. As long as we set up different attributes from Baseline, we can avoid this problem.

3. The third solution

But the method of alignment is modified, so it may also cause problems. Can we let this element float? Now that you are no longer in the current documentation, you will naturally not be aligned with reference to this text when you lay out.

We can use floating.

 <Style Type = Text/CSS> IMG {Height: 200px; Margin: 0; padding: 0; border-bottom: 1px solid red; float: left;} Ul li {overflow: hidden;} ul {bord er: 1px solid blue ; List-Style: None; Padding: 0; Margin: 0;} </style>

This can also solve this problem, but please note that although the floating is good, don't be greedy.

You must be able to correctly solve the impact of floating, and if you originally planned to do the effect of text surround, then using floating must be your best choice.

4. The fourth solution

If all the above schemes cannot solve your problems, then only my big kill is sacrificed.

You can give your parent element to set the text size to 0.

 <Style Type = Text/CSS> IMG {Height: 200px; Margin: 0; Padding: 0; Border-BOTTOM: 1px solid red;} Ul Li {font-siZe: 0px;} Ul {border: 1px solid brid bl UE; List -Stedyle: None; padding: 0; margin: 0;} </style>

Since you are aligned according to the baseline of the text, I will set the text directly, so that you can't position it, but this approach is only recommended when you are in a hurry Use.

Summarize

Well, the above is the four solutions for this problem. I hope that the friends who see this article can jump out of this pit in the future. If you have any questions, you can leave a message to communicate.