前端学习笔记（一）input、a等标签消除留白造成留白的原因是标签之间的换行符或空白符会被浏览器解析成空白符，inlin

记录几种可以消除input、a等标签留白的方法

造成留白的原因是标签之间的换行符或空白符会被浏览器解析成空白符，inline、inline-block的元素可能都存在这个问题。留白的长度通常是4px，当然，不同浏览器可能不同。

// input框之间有间距
<div class="demo">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
</div>

// 换行符会或空白符导致placeholder无法正确显示
<div>
    <textarea name="textarea1" id="textarea1" cols="30" rows="10" placeholder="请输入文本">
    </textarea>
</div>

// or
<div>
    <textarea name="textarea1" id="textarea1" cols="30" rows="10" placeholder="请输入文本"> </textarea>
</div>

一、将input等标签写在一行

因为导致留白的就是标签之间的换行符或空白符，因此可以把全部标签拼在一行来消除留白。不推荐这种方式，如果有多个input框的留白需要处理时，会显得比较繁琐，而且代码结构也比较混乱

<div class="demo">
    <input type="text" name="text1"/><input type="text" name="text2"/>
</div>

// or
<div class="demo">
    <input type="text" name="text1"/><input
    type="text" name="text2"/>
</div>

结果

二、float浮动

浮动元素会生成一个块级框，而不论它本身是何种元素。因此可以打破他的inline-block属性，也就达到了清除留白的目的，但是这种方式可能会对布局产生影响

// html
<div class="demo">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
</div>

// css

.demo input {
    float: left;
}

结果

三、letter-spacing

letter-spacing可以增加或减少字符间的空白，即控制字符间距，将letter-spacing的值设置成很大的负数，也可以达到清除留白的目的。要记得将子元素的letter-spacing设置回0，不然子元素的文本可能挤成一坨。

// html
<div class="demo">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
</div>

// css

.demo {
    letter-spacing: -999px;
}

.demo input {
    letter-spacing: 0;
}

结果

四、word-spacing

和letter-spacing一样，只不过word-spacing控制的是单词或者字的间距。

// 在谷歌中表现为将第一个往后的元素平移到左边看不见的位置
// 在火狐，IE中表现正常
// html
<div class="demo">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
</div>

// css

.demo {
    word-spacing: -999px;
}

谷歌

火狐、IE11

当子元素标签之间有纯文本时，谷歌、火狐、Edge会把文本当成是字间距处理为0，而IE会把文本显示在标签之间

// html
<div class="demo">
    <input type="text" name="text1"/>
    我是一行文本
    <input type="text" name="text2"/>
</div>

// css
.demo {
    word-spacing: -999px;
    // 只有word-spacing会这样
    // font-size、letter-spacing都表现正常
}

谷歌

火狐、Edge

IE

所以，不推荐使用word-spacing。

五、设置`font-size: 0;`

将font-size设置为0即可把空白符给隐藏，这样也起到了消除留白的作用，副作用是如果子元素是类似于span标签这种文本需对子元素设置正确的font-size，不然也会被隐藏

// html
<div class="demo">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
</div>

// css

.demo {
    font-size: 0;
}

最后：

当子元素为img时，父元素与子元素都没有显式设置宽高，父元素会比子元素高出一些

// html
<div class="demo">
    // 长宽均为150px的纯黑色图片
    <img src="./black.png" alt="">
</div>

// css
.demo {
    background: red;
}

这时候letter-spacing和word-spacing不能清除留白，因为letter-spacing和word-spacing影响的是字符或字之间的间距，一般是横向的。而浮动会撑不开父元素的宽高

1、打破img的inline-block属性可以清除父元素多余的留白

// html
<div class="demo">
    // 长宽均为150px的纯黑色图片
    <img src="./black.png" alt="">
</div>

// css
.demo {
    background: red;
    display: flex;
}

// or
.demo {
    background: red;
}
.demo img {
    display: block;
}

// or 
...

结果

2、设置font-size为0也可以清除父元素的留白

// html
<div class="demo">
    // 长宽均为150px的纯黑色图片
    <img src="./black.png" alt="">
</div>

// css
.demo {
    background: red;
    font-size: 0;
}

结果

前端学习笔记（一）input、a等标签消除留白