zoukankan      html  css  js  c++  java
  • img底部空白以及多余的空白文本节点解决方案

    1:img底部有空白的问题

    img的css属性display的默认值是inline,这样会导致img的vertical-align的默认值是 baseline;

    baseline又不是bottom,只是向四线三格中的第三条线对齐,不是向第四条线对齐;所以出现底部出现空白的地方说到底是第三条线到第四条线的距离;

    要想去掉这段距离,只能从vertical-align下手:

      1: 设置vertical-align:top/bottom/middle;

      2: 设置line-height:0px 或 font-size:0px 间接影响vertical-align的值;

      3: 设置img标签为display:block 或 float:left,这样就会影响到img的display默认值;

    2:img渲染的时候会在后面多出现空白文本节点的问题

    先看第一种写法:

    <div style="font-size: 12px;">
        <img src="../img/img.jpg"  alt="hh" style=" 12px;height: 12px;" />
        我是欧健锋
    </div>

    图片和文字间还是有一点距离的;

    第二种写法:

    <div style="font-size: 12px;">
        <img src="../img/img.jpg"  alt="hh" style=" 12px;height: 12px;" />我是欧健锋
    </div>

    图片和文字间距离基本为0;

    总结:出现上述的问题主要看img的末尾有没有html标签,如果没有的话浏览器会自动渲染一个空白文本节点在img的后面;

    解决方法:

    1:像楼主这样把后面的节点挨着img标签

    2:设置img标签为浮动元素,float:left;

    3:设置img的父元素的font-size:0px;

  • 相关阅读:
    Codeforces Round #436 (Div. 2)
    【bzoj1090】 [SCOI2003]字符串折叠
    【并查集】食物链(带权并查集)
    【图论】二分图
    【图论】关押罪犯
    关于图论的若干巴拉巴拉
    一系列的入门and一堆吐槽
    【分块】八
    9-30刷题记录
    bzoj5055
  • 原文地址:https://www.cnblogs.com/oufeng/p/6399827.html
Copyright © 2011-2022 走看看