Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 使用css减少img和文本之间的空间_Html_Css - Fatal编程技术网

Html 使用css减少img和文本之间的空间

Html 使用css减少img和文本之间的空间,html,css,Html,Css,这是我当前的设置- css HTML 我需要使用CSS删除导出和实际图片之间的空白。我怎么做 我尝试了各种删除填充/边距的选项,但没有任何效果。您需要从链接中删除右填充,从img中删除左填充 #exportButton { float: left; background-color: Green; height: 32px; margin-left: 3%; border-radius: 5px; margin-right: 1%; p

这是我当前的设置-

css

HTML


我需要使用CSS删除导出和实际图片之间的空白。我怎么做


我尝试了各种删除填充/边距的选项,但没有任何效果。

您需要从链接中删除右填充,从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;
}
示例:

通过混合使用减小父级字体大小和边距/填充编辑,我能够将它们并排放置。我确实给图像添加了背景色,以便更好地显示文本旁边的图像。它有点粗糙,但很有效

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;
}    

去掉两者的填充,除非需要,否则将图像边框设为0。然后再删除链接和imgy之间的换行符你是说要删除“HTML”和图像之间的空白?像这样的?
#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;
}
#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;
}