The img label clearance is solved.
In our normal development process, we often need to use multiple images. When using multiple images, we usually use a list to load our img.
<!DOCTYPE html>However, we found a problem at this time. Why is there a line below my picture?
What's going on?
Haven't I cleared all the img outer and inner margins?
In fact, this is actually a ghost of the inline element.
Any visible element that is not a block-level element is an inline element, which is characterized by a "Row layout. ---- CSS authoritative guide
What does it mean?
This means that the default alignment of an inline element such as text is aligned with its parent baseline, but you are alignment with baseline, the height is the overall height of the element (bottom line), which will certainly cause some gaps, that is, the problems we encountered above.
Now that we know the cause of this problem, it is much easier to solve it.
1. solution 1
Since this problem occurs only when it is an inline element, we can solve this problem simply and rudely, that is, to "change the personality" of our elements ", can I change it 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 blue; list-style: none; padding: 0; margin: 0; } </style>2. solution 2
This is too rough. It changes to gender. How can we play happily? So we have to try to save the curve. We can modify its vertical alignment, can this be done?
<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>We can see that this can also achieve the desired effect.
The reason is that the default attribute of vertical-align is baseline. we can avoid this problem by setting different attributes than baseline.
3. solution 3
However, if the alignment mode is modified, this may also cause problems. Can we let this element float? Since you are no longer in the current document stream, you will not use this text to align your layout.
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{ border: 1px solid blue; list-style: none; padding: 0; margin: 0; } </style>This can also solve this problem, but please note, "although the floating is good, do not greedy ".
You must be able to correctly solve the impact caused by floating, and if you were originally planning to do the text surround effect, then using floating will be your best choice.
4. solution 4
If none of the above solutions can solve your problem, then I will only sacrifice my kill.
You can set the text size to 0 for your parent element.
<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 blue; list-style: none; padding: 0; margin: 0; } </style>Since you are alignment based on the baseline of the text, I will leave the text for you directly, so you can't locate it. But in this way, we recommend that you use it only when you are "unable to get your head blank.
Summary
Well, the above are the four solutions to this problem. I hope that my friends in this article will be able to jump out of this trap in the future. If you have any questions, you can leave a message.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
