删除图像之间的空白

Question

我正在使用博客，我想知道如何删除 img 和文本之间的空格，因为它们之间有很多分离。 Blogger 包含一个名为 separator 的类，但我不知道如何解决这个问题。

这是一张图片：

我怎样才能删除它？

这是我的css

.separator{ 
   margin: 0; 
   display: block; 
   padding: 0; 
} 
.post img { 
   display: block; 
   text-align: center; 
   padding: 0px;
   margin: 0px; 
}

CSS

/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em;display:none;}
.wrapfullpost{display: block;}
.post{
    display: block;
    margin: 0;
}
.post img {display: block;
  margin: auto;
  text-align: center;
  padding: 0;
}
.post-title{color:#333333;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:24px;line-height:24px;font-weight:bold;}
.post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;text-decoration:none;}
.post-title strong,.post-title a:hover{text-decoration:none;}
.post-body{

    font-size: 17px;
    display: block;
    margin: 0;
}
.entry-content{ padding: 0; margin: 0; display: block;
}
.separator{
    margin: 0;
    display: block;
    padding: 0;
}
.post-footer{margin:5px 0; font-weight: 300;}
.comment-link{margin-$startSide:.6em}
.postmeta-primary{color:#999;font-size:12px;line-height:18px;padding:0 0 5px 0}
.postmeta-secondary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px 0}
.postmeta-primary span,.postmeta-secondary span{padding:3px 0 3px 20px;background-position:left center;background-repeat:no-repeat}
.meta_date{background-image:url(http://2.bp.blogspot.com/-paWPYJvQDqA/UC7eiuIKgUI/AAAAAAAAAvw/af410sUcO2w/s000/date.png)}
.meta_author{background-image:url(http://3.bp.blogspot.com/-reTaoyVmDXA/UC7ejgVBQbI/AAAAAAAAAv4/u6d-iPeLZi0/s000/author.png); border-right: 1px solid #ccc;
padding-right: 10px!important;
m
argin-right: 5px;}
.meta_comments{background-image:url(http://2.bp.blogspot.com/-zZgvwATiF3E/UC7ej-cvmbI/AAAAAAAAAwA/THMs0579MII/s000/comments.png) }
.meta_edit{background-image:url(images/edit.png)}
.meta_categories{background-image:url(http://1.bp.blogspot.com/-g-ptS39XbNM/UC7ekTJsEXI/AAAAAAAAAwI/t8fMhUuUvQI/s000/category.png)}
.meta_tags{background-image:url(http://3.bp.blogspot.com/-fZuK3yymXmo/UC7ek6kEDLI/AAAAAAAAAwQ/-J16r4bHvFo/s000/tags.png)}
.readmore{margin-bottom:5px;float:right}
.readmore a{color:#F85B48;background:#EAEAEA url(http://4.bp.blogspot.com/-m6AJDK0k2xA/UC7emOYbEbI/AAAAAAAAAwY/Q4o73QiZdc4/s000/readmore-bg.png) left top repeat-x;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase}
.readmore a:hover{color:#fff;background:#E74F3D url(http://4.bp.blogspot.com/-m6AJDK0k2xA/UC7emOYbEbI/AAAAAAAAAwY/Q4o73QiZdc4/s000/readmore-bg.png) left -126px repeat-x;text-decoration:none}

这就是博主在 HTML 中添加的内容

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DGgnyTkp3xc/VAtkSdWZLxI/AAAAAAAAAb4/oXctHDcrSRk/s1600/Sinopsis%2Bwissar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-DGgnyTkp3xc/VAtkSdWZLxI/AAAAAAAAAb4/oXctHDcrSRk/s1600/Sinopsis%2Bwissar.png" height="160" width="640" /></a></div>

Answer 1

由于您没有共享任何代码，因此很难解释问题出在哪里（您可能会得到否定的代表）。 但我可以建议你看看你的风格课程。试试following，只是去掉了Padding和Margin

.imageClass{
    padding: 0px;
    margin: 0px;
    display: block;
}

.textClass{
    padding: 0px;
    margin: 0px;
    display: block;
}

Answer 2

在seperator 类中，有一个包含文本的blockquote 和一个包含图像的链接a 标记。这两个都有你不想要的边距。试试这个。

.seperator blockquote {
    margin: 0px;
}

.seperator a {
    margin-right: 0px;
}

注意：删除我之前回答中的内容。

如果您无法使其工作，请转到您要更改的网页部分，右键单击 -> 检查元素。这将打开 HTML 检查器。然后，您可以单击不同的元素并在右侧查看与该元素相关的 css。尝试取消勾选不同的 css 语句或更改它们/添加新的。继续玩它，直到你能得到它。我真的帮不上什么忙了。

Answer 3

解决了，加了下一个

.separator {
    display: block;
    line-height:0;
    margin: 0;
    padding: 0;
}

.separator blockquote {
    margin: 0;
}

.separator a {
    margin-right: 0;
}

感谢给了我很多帮助的 Yep_It's_Me。