解决img标签上下出现间隙的方法
这篇文章主要给大家介绍了解决img标签上下出现间隙的方法，因为最近在工作中遇到了这个问题，所以想着记录下来。方便自己或者有需要的朋友们参考借鉴，下面来一起看看吧。
我们在平常的开发过程中，经常需要使用多张图片，而使用多张图片的时候，我们一般会去使用一个列表来对我们的img 进行承装。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
height: 200px;
margin: 0;
padding: 0;
border-bottom: 1px solid red;
}
ul{
border: 1px solid blue;
list-style: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul>
<li>
<img src="lipeng.png">
</li>
</ul>
</body>
</html>但是这个时候我们发现了一个问题，为什么我的图片下面多出来一条线呀？
这是怎么回事呀？
我不是已经把 img 的外边距和内边距什么的全部清空了么？
实际上，这其实是inline元素搞的鬼。
任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。----《CSS权威指南》
什么意思？
意思就是，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。
那我们既然知道了这个问题出现的原因，那么解决起来也就简单多啦。
1.第一种解决方案
既然是 inline 元素才会发生这个问题，那我们自然可以简单粗暴的解决这个问题，那就是给我们的元素“变个性”，让它从 inline 变为 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.第二种解决方案
这也太粗暴了，变了性别，回头还怎么愉快的玩耍呀，所以我们要尝试曲线救活，我们可以去修改一下它的垂直对齐方式呀，这样是不是就可以了呢？
<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>可以看出，这样也可以实现想要的效果。
原因在于，vertical-align 的默认属性就是 baseline ，我们只要设置了跟 baseline 不一样的属性，都可以避免这个问题。
3.第三种解决方案
但是修改了对齐方式，这样也有可能会造成问题呀，我们可不可以去让这个元素飘起来呢？既然你已经不在当前文档流中了，你布局的时候自然也就不会参照这个文字去进行对齐了呀。
我们可以去使用浮动。
<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>这样也可以解决这个问题，但是请注意，“浮动虽好，可不要贪杯呦”。
你一定要能够正确的解决浮动所造成的影响，而且假如你原本就打算去做文字环绕效果，那么使用浮动一定是你的不二选择。
4.第四种解决方案
假如上面几种方案全都不能解决你的问题，那么只有祭出我的大杀器了。
你可以给你的父元素把文字大小设成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 blue;
list-style: none;
padding: 0;
margin: 0;
}
</style>既然你是根据 文字的基线去对齐，我直接把文字给你设没了，这样你就没法定位了吧，但是这种做法，只推荐在你已经“急头白脸死活弄不出来”的时候才去使用的。
Atas ialah kandungan terperinci 解决img标签上下出现间隙的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1384
52
Bagaimana untuk membuka fail img
Sep 18, 2023 am 09:40 AM
Kaedah untuk membuka fail img termasuk menggunakan perisian pemacu optik maya, menggunakan perisian pemampatan dan menggunakan alat khas. Pengenalan terperinci: 1. Gunakan perisian pemacu optik maya untuk membuka, memuat turun dan memasang perisian pemacu optik maya, klik kanan fail img, pilih "Buka dengan" atau "Program Bersekutu", pilih perisian pemacu optik maya yang dipasang dalam pop timbul kotak dialog -up, maya Perisian pemacu optikal secara automatik akan memuatkan fail img dan menggunakannya sebagai imej cakera dalam pemacu optik maya Klik dua kali pada ikon cakera dalam pemacu optik maya untuk membuka fail img dan mengakses kandungannya. dll.
Bagaimana untuk membuka fail img
Jul 06, 2023 pm 04:17 PM
Cara membuka fail img: 1. Sahkan laluan fail img 2. Gunakan pembuka fail img 3. Pilih kaedah pembukaan; 5. Simpan gambar; Fail img ialah format fail imej yang biasa digunakan, biasanya digunakan untuk menyimpan data gambar.
Apakah format img?
Mar 17, 2023 am 10:33 AM
img ialah format pemampatan fail, terutamanya digunakan untuk mencipta fail imej cakera liut Ia boleh digunakan untuk memampatkan kandungan keseluruhan cakera liut atau keseluruhan fail CD dengan sambungan ".IMG" dibuat menggunakan format fail ini. ; Fail img merangkumi 3 nod asas, iaitu "Ehfa_HeaderTag", "Ehfa_File" dan "Ehfa_Entry".
Cara mencari teks merentas semua tab dalam Chrome dan Edge
Feb 19, 2024 am 11:30 AM
Tutorial ini menunjukkan kepada anda cara mencari teks atau frasa tertentu pada semua tab terbuka dalam Chrome atau Edge pada Windows. Adakah terdapat cara untuk melakukan carian teks pada semua tab terbuka dalam Chrome? Ya, anda boleh menggunakan sambungan web luaran percuma dalam Chrome untuk melakukan carian teks pada semua tab terbuka tanpa perlu menukar tab secara manual. Sesetengah sambungan seperti TabSearch dan Ctrl-FPlus boleh membantu anda mencapai ini dengan mudah. Bagaimana untuk mencari teks merentas semua tab dalam Google Chrome? Ctrl-FPlus ialah sambungan percuma yang memudahkan pengguna mencari perkataan, frasa atau teks tertentu merentas semua tab tetingkap penyemak imbas mereka. Pengembangan ini
Bagaimana untuk menambah tag pada Douyin untuk menarik trafik? Teg mana pada platform yang paling mudah untuk menarik trafik?
Mar 22, 2024 am 10:28 AM
Sebagai platform sosial video pendek yang popular, Douyin mempunyai pangkalan pengguna yang besar. Bagi pencipta Douyin, menggunakan tag untuk menarik trafik ialah cara yang berkesan untuk meningkatkan pendedahan kandungan dan menarik perhatian. Jadi, bagaimanakah Douyin menggunakan tag untuk menarik trafik? Artikel ini akan menjawab soalan ini secara terperinci untuk anda dan memperkenalkan teknik yang berkaitan. 1. Bagaimana untuk menambah tag pada Douyin untuk menarik trafik? Apabila menyiarkan video, pastikan anda memilih teg yang berkaitan dengan kandungan. Teg ini harus merangkumi topik dan kata kunci video anda untuk memudahkan pengguna mencari video anda melalui teg. Memanfaatkan hashtag popular ialah cara yang berkesan untuk meningkatkan pendedahan video anda. Selidik teg dan aliran popular semasa dan masukkannya ke dalam perihalan dan teg video anda. Teg popular ini biasanya mempunyai keterlihatan yang lebih tinggi dan boleh menarik perhatian lebih ramai penonton. 3. Label
Apakah jam di belakang label TikTok? Bagaimana untuk menandakan akaun Douyin?
Mar 24, 2024 pm 03:46 PM
Apabila menyemak imbas Douyin berfungsi, kita sering melihat ikon jam di belakang teg. Jadi, apakah sebenarnya jam ini? Artikel ini akan menumpukan pada perbincangan tentang "Apakah jam di belakang label Douyin", dengan harapan dapat memberikan beberapa rujukan berguna untuk penggunaan Douyin anda. 1. Apakah jam di belakang label Douyin? Douyin akan melancarkan beberapa cabaran topik hangat Apabila pengguna mengambil bahagian, mereka akan melihat ikon jam selepas teg, yang bermaksud bahawa kerja itu mengambil bahagian dalam cabaran topik dan memaparkan baki masa cabaran. Untuk sesetengah kandungan sensitif masa, seperti cuti, acara khas, dsb., Douyin akan melampirkan ikon jam selepas label untuk mengingatkan pengguna tentang tempoh sah kandungan tersebut. 3. Teg popular: Apabila teg menjadi popular, Douyin akan menambah ikon jam selepas teg untuk menunjukkan bahawa teg itu
Melihat lebih dekat pada elemen video dalam HTML
Feb 24, 2024 pm 08:18 PM
Penjelasan terperinci tentang teg video dalam HTML Teg video dalam HTML5 ialah teg yang digunakan untuk memainkan video di halaman web. Ia boleh memaparkan video menggunakan format yang berbeza, seperti MP4, WebM, Ogg dan banyak lagi. Dalam artikel ini, kami akan memperkenalkan penggunaan teg video secara terperinci dan memberikan contoh kod khusus. Struktur Asas Berikut ialah struktur asas teg video:
Apakah perbezaan antara kepala teg html5 dan pengepala?
Jan 17, 2022 am 11:10 AM
Perbezaan: 1. Tag kepala digunakan untuk menentukan kepala dokumen, yang merupakan bekas untuk semua elemen kepala, dan tag pengepala digunakan untuk menentukan pengepala (maklumat pengenalan) dokumen 2. Semua pelayar menyokong teg kepala, dan versi penyemak imbas yang lebih lama Tiada penyemak imbas menyokong teg pengepala, dan penyemak imbas seperti IE9 dan ke atas diperlukan untuk menyokong teg pengepala.
