空格和换行符造成3像素距离问题解决

程序员文章站 2024-03-15 11:23:05

...

1、解决a、img 之间的3px距离.html

<head>
        <meta charset="UTF-8">
        <!--
            <a><img /></a>之间的3px距离产生的原因：
        -->
        <title></title>
    <style>
            a{
                display:inline-block;
                font-size: 0;               
            }
            #testImg{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com"><img id="testImg" src="../../../../../img/mei6.jpg"  /></a>
    </body>

2、解决行内块&行内元素之间的3px距离.html

<head>
        <meta charset="UTF-8">
        <!--
        行内块&行内元素之间的3px距离的原因：空格和换行符造成3像素距离
        -->
        <title></title>
    <style type="text/css">
            body{
                font-size: 0;
            }
            span{
                font-size: 16px;
            }
            #testImg{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <span>testSpan</span>
        <span>testSpan</span>
        <span>testSpan</span>
        <img id="testImg" src="../../../../../img/mei6.jpg"  />
        <img id="testImg" src="../../../../../img/mei6.jpg"  />
        <img id="testImg" src="../../../../../img/mei6.jpg"  />
    </body>

相关标签：解决a、img 之间的3px距离解决行内块&行内元素之间的3px距离

上一篇： Unity中使用C#脚本时不同类之间相互调用方法

下一篇： SpringMVC 实现页面跳转