小贝子编程

显示:块不工作的图像，以消除差距



我的垂直菜单使用图像，图像之间都有一个小的间隙。建议使用"display: block"想要缩小差距，但似乎不起作用。不确定是否CSS中的其他东西干扰了它。看这里的空白

注意:水色不是永久的。它只是为了更好地看到差距。

/*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, Ariel, 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, Ariel, 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对它，所以没有基线对齐，因此图像下面没有空白空间。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium