Home > php教程 > PHP开发 > Solution to the problem of gaps between img pictures inserted into li

Solution to the problem of gaps between img pictures inserted into li

高洛峰
Release: 2016-12-24 15:45:04
Original
1404 people have browsed it

Directly add the style img{vertical-align:bottom; display:block}

Of course it doesn’t work in some cases. For example, I want to add three pictures, top, middle and bottom, and the middle picture is set as the background. I found this method Invalid, just the gap between the top and middle pictures is gone, but there is still a gap between the bottom and the middle. The method is very simple. Change vertical-align:bottom to top. You can set the parameters of vertical-align according to the different situations you encounter.

Method 1:

img{vertical-align:top; display:block}
Copy after login

Solution to the problem of gaps between img pictures inserted into li

<style>
#l1 {float:left;background:#000;}
#l1 ul li {list-style:none;padding:0;margin:0}
img {vertical-align:bottom; display:block;}
</style>
Copy after login

Method 2: Set container font-size:0 (Personally think this method is the best!!!)


More Insert img pictures in li with gaps between them For articles related to solutions, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template