zoukankan      html  css  js  c++  java
  • 解决div和img之间的空隙

    div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下。

    先上代码和效果图:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0
            }
            div{
                margin: 0 auto;
                max- 400px;
            }
            img{
                 100%;
            }
            .bb{
                height: 300px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="b">
            <img src="./t.jpg" alt="">
        </div>
        <div class="bb"></div>
    </body>
    </html>


    总结了下解决方法还不少:

     1.将img设置为block;

        这个基本可以解决img和div下方的缝隙问题。

    2.设置img的竖直对齐方式

         v-align:bottom;

    3.设置父级div的font-size:0;

    4.设置外层的div的line-height:0

    在这里推荐第一种。

  • 相关阅读:
    julia文件合并排序.jl
    julia生成指定格式的字符串.jl
    Julia中文教程资源.txt
    python socket发送魔法包网络唤醒开机.py
    julia与python中的列表解析.jl
    python利用or在列表解析中调用多个函数.py
    Django Admin流程
    meeting
    会议
    数据库
  • 原文地址:https://www.cnblogs.com/wangxiaomo/p/11573387.html
Copyright © 2011-2022 走看看