行内元素多出的空白文本节点的解决方法

Posted 2020-10-08 rqpjuicy

问题1：会造成img底部有空白的问题

行内元素的vertical-align(该属性适用于行内元素和table-cell元素)默认是baseline

解决：

       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后面出现空白文本节点的

img末尾无html标签，会自动添加空白文本节点。

解决：

        1：设置img标签为浮动元素，float：left;

        2：设置img的父元素的font-size：0px;

问题3：块级元素display设置成inline-block后，中间存在空白

解决：

         1：设置img标签为浮动元素，float：left;

         2：设置img的父元素的font-size：0px;

         3：父元素letter-spacing  或 word-spacing ：-字号

         4.子元素margin-right：-4px