如何解决显示：阻止不处理图像以消除间隙
我的垂直菜单使用图像，图像之间都有一个小的间隙。有人建议使用“display:block”来缩小差距，但似乎不起作用。不确定 CSS 中的其他内容是否与它有关。 See gaps here
注意：浅绿色不是永久性的。它只是为了更好地看到差距。
/*MENU CSS START*/
h1 {
font-family: Veranda,Ariel,Sans-Serif;
font-size: 30px;
color: gray;
}
#menuWrapper {
max-width: 100%;
width: 180px;
height: 460px;
padding: 0px;
background-color: aqua;
}
#menu {
margin: 0;
padding: 0em;
}
#menuSideimg {
float: left;
}
.buttontop {
margin: 0;
padding: 0;
border-bottom: solid 10px #666;
}
ul {
font-family: Veranda,Sans-Serif;
font-size: 16px;
margin: 0;
padding: 0px;
list-style: none;
letter-spacing: 2px;
text-align: center;
}
ul li {
display: block;
position: relative;
width: 180px;
margin: 0;
}
/*subMenu Settings START*/
a.subMenu {
padding: 5px 15px 5px 15px;
margin-left: 1px;
text-decoration: none;
color: #ffffff;
background-color: #222222;
font-family: arial;
font-size: 12px;
width: 190px;
}
a:hover.subMenu {
text-decoration: none;
color: #c7b297;
font-family: arial;
font-size: 12px;
width: 190px;
}
/*subMenu Settings END*/
/*Vertical Menu Image START (no hover)*/
li a.menuHover1 {
background: url("../img/introbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover2 {
background: url("../img/storybutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover3 {
background: url("../img/charactersbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover4 {
background: url("../img/gamehelpbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover5 {
background: url("../img/printablesbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover6 {
background: url("../img/mediabutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover7 {
background: url("../img/extrabutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
/*Vertical Menu Image END (no hover)*/
/*Vertical Menu Image START (hover)*/
li a:hover.menuHover1 {
background: url("../img/introbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover2 {
background: url("../img/storybutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover3 {
background: url("../img/charactersbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover4 {
background: url("../img/gamehelpbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover5 {
background: url("../img/printablesbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover6 {
background: url("../img/mediabutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover7 {
background: url("../img/extrabutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
/*Vertical Menu Image END (hover)*/
li ul {
display: none;
margin: 0;
}
ul li a {
display: block;
text-decoration: none;
background: gray;
color: #000;
border-top: 2px solid #666;
padding: 0;
margin: 0;
white-space: Nowrap;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: left;
font-size: 11px;
}
ul li ul {
position: absolute;
left: 100%;
top: 0;
}
/*MENU CSS END*/
/*STYLE START*/
body {
background-color: #000000;
}
#mainWrapper {
max-width: 100%;
width: 960px; // assume this is the default size
margin-right: auto;
margin-left: auto;
}
.imgHeader {
max-width: 100%;
width: 900px; // assume this is the default size
}
/*STYLE END*/<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://tlod.net/include/css/style.css">
<link rel="stylesheet" type="text/css" href="https://tlod.net/include/css/menu.css">
<link rel="icon" href="">
<Meta name="viewport" content="width=device,initial-scale=1">
<Meta name="Author" content="Keven">
<Meta name="Original Author" content="Bret">
<Meta name="description" content="Welcome to Endiness. A re-envisioning of the Legend of dragoon website kNown as thelegendofdragoon.net.">
<Meta charset="utf-8"> <Meta name="robots" content="index,follow">
<title>Endiness,the Land of Dragoons!</title>
</head>
<body>
<div id="mainWrapper">
<header>
<img class="imgHeader" style="display: block" src="https://tlod.net/include/img/header-bg.jpg">
</header>
<nav id="menuWrapper">
<img class="bottontop" style="display: block" src="https://tlod.net/include/img/buttontop.png">
<ul id="menu">
<li><a class="menuHover1" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Home</a></li>
<li><a class="subMenu" href="#">Introduction</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover2" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Prologue</a></li>
<li><a class="subMenu" href="#">Ch1: Serdian War</a></li>
<li><a class="subMenu" href="#">Ch2: The Platinum Shadow</a></li>
<li><a class="subMenu" href="#">Ch3: Fate and Soul</a></li>
<li><a class="subMenu" href="#">Ch4: Moon and Fate</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover3" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Main</a></li>
<li><a class="subMenu" href="#">Other</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover4" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Abnormalities</a></li>
<li><a class="subMenu" href="#">Accessories</a></li>
<li><a class="subMenu" href="#">Additions</a></li>
<li><a class="subMenu" href="#">Art of fighting</a></li>
<li><a class="subMenu" href="#">Enemies</a></li>
<li><a class="subMenu" href="#">Experience</a></li>
<li><a class="subMenu" href="#">Items</a></li>
<li><a class="subMenu" href="#">Item Locations</a></li>
<li><a class="subMenu" href="#">Shopping</a></li>
<li><a class="subMenu" href="#">Sidequests</a></li>
<li><a class="subMenu" href="#">Special Items</a></li>
<li><a class="subMenu" href="#">Stardust</a></li>
<li><a class="subMenu" href="#">Stardust Picture Guide</a></li>
<li><a class="subMenu" href="#">Team/Stat Evaluation</a></li>
<li><a class="subMenu" href="#">Weapons/Armor</a></li>
<li><a class="subMenu" href="#">Walkthrough</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover5" href=""><img class="menuHover5" src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Abnormalities</a></li>
<li><a class="subMenu" href="#">Accessories</a></li>
<li><a class="subMenu" href="#">Additions</a></li>
<li><a class="subMenu" href="#">Art of fighting</a></li>
<li><a class="subMenu" href="#">Enemies</a></li>
<li><a class="subMenu" href="#">Experience</a></li>
<li><a class="subMenu" href="#">Items</a></li>
<li><a class="subMenu" href="#">Item Locations</a></li>
<li><a class="subMenu" href="#">Shopping</a></li>
<li><a class="subMenu" href="#">Sidequests</a></li>
<li><a class="subMenu" href="#">Special Items</a></li>
<li><a class="subMenu" href="#">Stardust</a></li>
<li><a class="subMenu" href="#">Stardust Picture Guide</a></li>
<li><a class="subMenu" href="#">Team/Stat Evaluation</a></li>
<li><a class="subMenu" href="#">Weapons/Armor</a></li>
<li><a class="subMenu" href="#">Walkthrough</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover6" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">MIdis</a></li>
<li><a class="subMenu" href="#">MP3s</a></li>
<li><a class="subMenu" href="#">Videos</a></li>
<li><a class="subMenu" href="#">Voice Clips</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover7" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Contact</a></li>
<li><a class="subMenu" href="#">gallery</a></li>
<li><a class="subMenu" href="#">Links In/Out</a></li>
<li><a class="subMenu" href="#">Notes</a></li>
<li><a class="subMenu" href="#">Voices/Lyrics</a></li>
<li><a class="subMenu" href="#">Translations</a></li>
</ul>
</li>
</ul>
<img src="https://tlod.net/include/img/buttonbottom.png">
</nav>
</div>
</body>
</html>解决方法
是的，display: block 在图像上 是要走的路（您的代码中没有）。看看我下面的代码片段，我只在你的代码中添加了这条规则，并且差距消失了：
#menuWrapper img {
display: block;
}
，将 display: block 应用于菜单中的所有图像：
/*MENU CSS START*/
h1 {
font-family: Veranda,Ariel,Sans-Serif;
font-size: 30px;
color: gray;
}
#menuWrapper {
max-width: 100%;
width: 180px;
height: 460px;
padding: 0px;
background-color: aqua;
}
#menuWrapper img {
display: block;
}
#menu {
margin: 0;
padding: 0em;
}
#menuSideimg {
float: left;
}
.buttontop {
margin: 0;
padding: 0;
border-bottom: solid 10px #666;
}
ul {
font-family: Veranda,Sans-Serif;
font-size: 16px;
margin: 0;
padding: 0px;
list-style: none;
letter-spacing: 2px;
text-align: center;
}
ul li {
display: block;
position: relative;
width: 180px;
margin: 0;
}
/*subMenu Settings START*/
a.subMenu {
padding: 5px 15px 5px 15px;
margin-left: 1px;
text-decoration: none;
color: #ffffff;
background-color: #222222;
font-family: arial;
font-size: 12px;
width: 190px;
}
a:hover.subMenu {
text-decoration: none;
color: #c7b297;
font-family: arial;
font-size: 12px;
width: 190px;
}
/*subMenu Settings END*/
/*Vertical Menu Image START (no hover)*/
li a.menuHover1 {
background: url("../img/introbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover2 {
background: url("../img/storybutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover3 {
background: url("../img/charactersbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover4 {
background: url("../img/gamehelpbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover5 {
background: url("../img/printablesbutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover6 {
background: url("../img/mediabutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a.menuHover7 {
background: url("../img/extrabutton.jpg") no-repeat;
width: 180px;
height: 28px;
}
/*Vertical Menu Image END (no hover)*/
/*Vertical Menu Image START (hover)*/
li a:hover.menuHover1 {
background: url("../img/introbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover2 {
background: url("../img/storybutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover3 {
background: url("../img/charactersbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover4 {
background: url("../img/gamehelpbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover5 {
background: url("../img/printablesbutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover6 {
background: url("../img/mediabutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
li a:hover.menuHover7 {
background: url("../img/extrabutton2.jpg") no-repeat;
width: 180px;
height: 28px;
}
/*Vertical Menu Image END (hover)*/
li ul {
display: none;
margin: 0;
}
ul li a {
display: block;
text-decoration: none;
background: gray;
color: #000;
border-top: 2px solid #666;
padding: 0;
margin: 0;
white-space: nowrap;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: left;
font-size: 11px;
}
ul li ul {
position: absolute;
left: 100%;
top: 0;
}
/*MENU CSS END*/
/*STYLE START*/
body {
background-color: #000000;
}
#mainWrapper {
max-width: 100%;
width: 960px; // assume this is the default size
margin-right: auto;
margin-left: auto;
}
.imgHeader {
max-width: 100%;
width: 900px; // assume this is the default size
}
/*STYLE END*/<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://tlod.net/include/css/style.css">
<link rel="stylesheet" type="text/css" href="https://tlod.net/include/css/menu.css">
<link rel="icon" href="">
<meta name="viewport" content="width=device,initial-scale=1">
<meta name="Author" content="Keven">
<meta name="Original Author" content="Bret">
<meta name="description" content="Welcome to Endiness. A re-envisioning of the Legend of dragoon website known as thelegendofdragoon.net.">
<meta charset="utf-8"> <meta name="robots" content="index,follow">
<title>Endiness,the Land of Dragoons!</title>
</head>
<body>
<div id="mainWrapper">
<header>
<img class="imgHeader" style="display: block" src="https://tlod.net/include/img/header-bg.jpg">
</header>
<nav id="menuWrapper">
<img class="bottontop" style="display: block" src="https://tlod.net/include/img/buttontop.png">
<ul id="menu">
<li><a class="menuHover1" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Home</a></li>
<li><a class="subMenu" href="#">Introduction</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover2" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Prologue</a></li>
<li><a class="subMenu" href="#">Ch1: Serdian War</a></li>
<li><a class="subMenu" href="#">Ch2: The Platinum Shadow</a></li>
<li><a class="subMenu" href="#">Ch3: Fate and Soul</a></li>
<li><a class="subMenu" href="#">Ch4: Moon and Fate</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover3" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Main</a></li>
<li><a class="subMenu" href="#">Other</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover4" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Abnormalities</a></li>
<li><a class="subMenu" href="#">Accessories</a></li>
<li><a class="subMenu" href="#">Additions</a></li>
<li><a class="subMenu" href="#">Art of Fighting</a></li>
<li><a class="subMenu" href="#">Enemies</a></li>
<li><a class="subMenu" href="#">Experience</a></li>
<li><a class="subMenu" href="#">Items</a></li>
<li><a class="subMenu" href="#">Item Locations</a></li>
<li><a class="subMenu" href="#">Shopping</a></li>
<li><a class="subMenu" href="#">Sidequests</a></li>
<li><a class="subMenu" href="#">Special Items</a></li>
<li><a class="subMenu" href="#">Stardust</a></li>
<li><a class="subMenu" href="#">Stardust Picture Guide</a></li>
<li><a class="subMenu" href="#">Team/Stat Evaluation</a></li>
<li><a class="subMenu" href="#">Weapons/Armor</a></li>
<li><a class="subMenu" href="#">Walkthrough</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover5" href=""><img class="menuHover5" src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Abnormalities</a></li>
<li><a class="subMenu" href="#">Accessories</a></li>
<li><a class="subMenu" href="#">Additions</a></li>
<li><a class="subMenu" href="#">Art of Fighting</a></li>
<li><a class="subMenu" href="#">Enemies</a></li>
<li><a class="subMenu" href="#">Experience</a></li>
<li><a class="subMenu" href="#">Items</a></li>
<li><a class="subMenu" href="#">Item Locations</a></li>
<li><a class="subMenu" href="#">Shopping</a></li>
<li><a class="subMenu" href="#">Sidequests</a></li>
<li><a class="subMenu" href="#">Special Items</a></li>
<li><a class="subMenu" href="#">Stardust</a></li>
<li><a class="subMenu" href="#">Stardust Picture Guide</a></li>
<li><a class="subMenu" href="#">Team/Stat Evaluation</a></li>
<li><a class="subMenu" href="#">Weapons/Armor</a></li>
<li><a class="subMenu" href="#">Walkthrough</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover6" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">MIDIs</a></li>
<li><a class="subMenu" href="#">MP3s</a></li>
<li><a class="subMenu" href="#">Videos</a></li>
<li><a class="subMenu" href="#">Voice Clips</a></li>
</ul>
</li>
<img src="https://tlod.net/include/img/spacer.jpg">
<li><a class="menuHover7" href=""><img src="https://tlod.net/include/img/blank-link-img.png"></a>
<ul>
<li><a class="subMenu" href="#">Contact</a></li>
<li><a class="subMenu" href="#">Gallery</a></li>
<li><a class="subMenu" href="#">Links In/Out</a></li>
<li><a class="subMenu" href="#">Notes</a></li>
<li><a class="subMenu" href="#">Voices/Lyrics</a></li>
<li><a class="subMenu" href="#">Translations</a></li>
</ul>
</li>
</ul>
<img src="https://tlod.net/include/img/buttonbottom.png">
</nav>
</div>
</body>
</html>注意：默认情况下，图像是内联元素并放置在基线上，如字母。但是，字母可以有“降序”，例如字母 y、g、p 等，其中字母的一部分低于基线，因此字母需要基线下方的空间。但当然不是图像。因此，如果您的图像是容器的唯一内容，请对其应用 display: block，这样就没有基线对齐，因此图像下方没有空白空间。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
