图片间隙问题处理

图片下方的间隙问题

问题描述

• 在一个div标签里嵌套img标签时，img下方与div下方会出现间

  •     <div class="box1"><img src="images/21(D5D5DQF](A0L9O{YSW59.png" alt=""></div>
       <div class="box2"><img src="images/21(D5D5DQF](A0L9O{YSW59.png" alt=""></div>
       <div class="box3"><img src="images/21(D5D5DQF](A0L9O{YSW59.png" alt=""></div>
       <div class="box4"><img src="images/21(D5D5DQF](A0L9O{YSW59.png" alt=""></div>
       <div class="box5"><img src="images/21(D5D5DQF](A0L9O{YSW59.png" alt=""></div>
    
    
    

    

    解决办法：

1. 将img标签转化为块级标签

   • .box1 img{
                display: block;
            }

      

   •  

2. 为img标签设置vertical-align属性，属性值：top|bottom|middle

   • .box2 img{
                vertical-align: top;
            }

     

      

3. 在img标签的父元素上设置高度和overflow:hidden;

   • .box3{
                height: 367px;
                overflow:hidden;
        }

     

      

4. 在img标签的父元素上设置font-size:0; 或line-height:0;

   • 
             img{
                 width: 300px;
             }
             div{
                 width: 300px;
                 border: 1px solid red;
                 line-height: 0;
             }