文章标题间距的问题

Question

文章链接地址：http://test1.baoxiaoyun.net/D...
没有图片时会出现下列效果：

没有图片时怎么调整上面的间距。

Answer 1

为什么一定要设置标题的边距，不能设置图片的边距呢

Answer 2

.share_title{/*不建议子元素设置一个高度，父元素再定一个*/
  height: initial; 
}
.share_title p{ /*通过修改p的高度可以达到share_title80px的效果，另外，建议给推荐加个class，用p后续修改风险比较大*/
  line-height: 20px;
  height: 20px;
}

.share_title.no-img a{ /*给没有图片的section加个no-img的class，我看你给item_detail加了width:100%了, 可以加到顶层元素上，后续通过顶层元素匹配的方式来呈现不同样式*/
  height: 35px;
}

.share_title.no-img .item_detail{ /*去掉item_detail的style="width:100%;" 用css就可以了*/
  width: 100%;
}

对应的html是

<section class="share_title">
    <a href="http://test1.baoxiaoyun.net/Divide/ArticleInfo.html?art_id=5104">
      <div class="item_detail" >
        <h3>【人生】如果你得了大病，超过多少钱就会放弃治疗？</h3>
      </div>
      <div class="item_img">
        <img src="/src/images/pic_loading.gif" data-bxysrc="/src/uploads/article/39/82/70/340982f418.jpg" alt=''/>
      </div>
      <div class="clear"></div>
    </a>
    <p>推荐</p>
</section>
<section class="share_title no-img"> <!--js判断是否有图片，没图片的时候添加class no-img-->
    <a href="http://test1.baoxiaoyun.net/Divide/ArticleInfo.html?art_id=4856">
      <div class="item_detail">
        <h3>社保和商保的12个区别，有社保更要买商保！</h3>
      </div>
      <div class="clear"></div>
    </a>
    <p>推荐</p>
</section>