div和img之间的空白间隔

问题描述：

在开发过程中，想要做一个类似标签的东西，上方是图片，下方是文字描述，鼠标滑过，下方需要有一个滑过效果，滑过的时候，下方底色变蓝，这时候会发现，图片和文字描述中间有一个空白间隙，如下图。

<div class="jsfx_data_item" v-for="(item,index) in jsfxLists">
    <img :src="item.imgUrl" />
    <div class="jsfx_data_item_detail">
        <div>{
   
   {item.title}}</div>
    </div>
</div>

F12对元素进行追踪，发现并没有任何设置的地方，平白多了几个像素的空白格，怎么也去不掉，使用margin-top设置负像素暂时解决问题，但是终究不是好办法。

原因：

其实就是vertical-align和line-height的问题，这俩虽然没有设置，但是却是无处不在。

vertical-align的默认值是baseline，默认与基线对齐，而在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点(CSS深入理解vertical-align和line-height的基友关系 « 张鑫旭-鑫空间-鑫生活)，也就是line-height捣的鬼。

说白了，img是内联元素，不分行，你就想象一下图片水平线上还有一个隐藏的文本，这个文本有行高，图片的 vertical-align默认值让其与文本下边缘对齐，行高顶出去的部分就成为了空白间隙。

解决办法：

话不多说，上解决办法。

1）不让图片与空虚有的行高处在同一个水平线上，设置图片为一个块级元素：

display:block;

.jsfx_data_item img {
    width: 100%;
    height: 3.3rem;
    display: block;//设置为块状元素
}

2) 设置行高，越小越好，不让其占据位置：

line-height:1px

.jsfx_data_item {
    width: 4.4rem;
    height: 5rem;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    cursor: pointer;
    line-height:1px;//在父级元素上设置
}

3) 修改vertical-align，不让其使用baseline：

vertical-align:bottom

.jsfx_data_item img {
    width: 100%;
    height: 3.3rem;
    vertical-align: bottom;//top、middle都可以
}

4）父级元素font-size直接设置为0，断了line-height的念想：

font-size:0

.jsfx_data_item {
    width: 4.4rem;
    height: 5rem;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    cursor: pointer;
    font-size: 0;
}

不过，最好使用第一种办法，会避免其他不必要的麻烦！

效果：

解决啦~

div和img之间的空白间隔

猜你喜欢