显示:无法在图像上显示块以消除间隙 [英] Display: block not working on images to remove gap
本文介绍了显示:无法在图像上显示块以消除间隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的垂直菜单使用图像，并且图像之间都有很小的间隙.建议使用"display:block"来代替.缩小差距，但这似乎行不通.不知道CSS中是否有其他东西弄乱了它.在此处查看差距
My vertical menu uses images and the image all have a small gap between them. It was suggested to use "display: block" to close the gap, but it doesn't seem to work. Not sure if something else in the CSS is messing with it. See gaps here
注意:浅绿色不是永久的.它只是在那里，以便更好地看到差距.
NOTE: the aqua color is not permanent. Its just there to better see the gaps.
/*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 在图像上是一种解决方法(您没有在您的代码中).看看下面的代码片段，我只在您的代码中添加了一条规则，差距就消失了:
Yes, display: block on the images is the way to go (you don't have that in your code). Look at my snippet below, I only added this one rule to your code and the gaps are gone:
#menuWrapper img {
display: block;
}
，它将 display:block 应用于菜单中的所有图像:
, which applies display: block to all images in the menu:
/*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 ，这样就不会进行基线对齐，因此图像下方不会有空白空间.
Note: Images by default are inline elements and placed on the baseline, like letters. However, letters can have "descenders", like the letters y, g, p etc., where a part of the letter goes below the baseline, so that space below the baseline is needed for letters. But of course not for images. So if your image is the only content of a container, apply display: block to it, so there is no baseline alignment, and therefore no empty space below the image.
这篇关于显示:无法在图像上显示块以消除间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
