删除img之间的空格

时间:2014-09-08 21:57:23

标签: html css whitespace separator

我正在使用博客,我想知道如何删除img和文本之间的空白区域,因为它是分开的。 Blogger包含一个名为separator的类,但我不知道如何解决这个问题。

这是一张图片:

enter image description here

如何删除它?

这是我的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>

3 个答案:

答案 0 :(得分:0)

由于您没有共享任何代码,因此很难解释问题的位置(您可能会得到否定代表)。 但我可以建议你看看你的风格课程。尝试下面,它只是删除Padding和Margin

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

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

答案 1 :(得分:0)

seperator课程中,blockquote包含文字,a标签是包含图片的链接。这两个都有你不想要的边距。试试这个。

.seperator blockquote {
    margin: 0px;
}

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

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

如果您无法使用它,请转到您要更改的网页部分,右键单击 - &gt;检查元素。这将打开HTML检查器。然后,您可以单击不同的元素,并在右侧查看与该元素相关的css。尝试解开不同的css语句或更改它们/添加新的css语句。继续玩它,直到你能得到它。我真的无法提供任何帮助。

enter image description here

答案 2 :(得分:0)

解决了,刚刚添加了下一个

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

.separator blockquote {
    margin: 0;
}

.separator a {
    margin-right: 0;
}

感谢Yep_It&#39; s,他帮助了我很多。

相关问题