这是我目前的设置 -
CSS
#exportButton {
float: left;
background-color: Green;
height: 32px;
margin-left: 3%;
border-radius: 5px;
margin-right: 1%;
padding: 0px;
}
#exportButton img {
height: 28px;
padding: 3px;
vertical-align: middle;
}
#exportLink {
font-size: 16px;
text-decoration:underline;
color: white;
padding: 3px;
}
HTML
<body style="background-color:#E6E6FA">
<span id="exportButton">
<a id="exportLink" >HTML</a>
<img src='http://s26.postimg.org/qpk50nhzp/icn_export.png' height="20px;">
</span>
我需要使用CSS删除Export和实际图片之间的空格。我该怎么做?
我尝试了各种删除填充/边距的选项,但没有任何作用..
答案 0 :(得分:1)
您需要从链接中删除右侧填充,并从img中删除左侧填充。
#exportButton {
float: left;
background-color: Green;
height: 32px;
margin-left: 3%;
border-radius: 5px;
margin-right: 1%;
padding: 0px;
}
#exportButton img {
height: 28px;
padding: 3px;
vertical-align: middle;
padding-left:0;
}
#exportLink {
font-size: 16px;
text-decoration:underline;
color: white;
padding: 3px;
padding-right:0;
}
答案 1 :(得分:0)
实施例: http://jsfiddle.net/NJ5Dz/24/
通过使用缩小父级字体大小和边距/填充编辑的混合,我能够将它们并排放置。我确实为图像添加了背景颜色,以便更好地显示文本旁边的图像。它有点hacky但它确实有效。
<强> CSS:强>
#exportButton {
float: left;
background-color: Green;
height: 32px;
margin-left: 3%;
border-radius: 5px;
margin-right: 1%;
padding: 0px;
font-size: 0;
}
#exportButton img {
height: 28px;
padding-top: 3px;
padding-bottom: 3px;
margin-left: 0px;
margin-top: -8px;
vertical-align: middle;
background-color: rgba(0,0,0,.4);
}
#exportLink {
font-size: 16px;
line-height: 28px;
text-decoration:underline;
color: white;
padding-left: 3px;
padding-top: 3px;
padding-bottom: 3px;
}