最近看源码看得有点累,准备写一篇css的来调节一下。
这篇记录学习拖了好长时间,今天我准备把这篇写完。
首先,先来看一下(后面我都用这个例子来讲)。
<div class="container">
<input type="text">
<button>Submit</button>
</div>
看到mio,确实是有一个间隙。这个间隙是因为标签在编辑器里换行浏览器会把它解析成空文本节点。那么解决的办法是什么?
简单粗暴
最简单的办法就是把标签写成一行。
<input type="text" /><button>Submit</button>
看了一下,确实把间隙去掉了。但是如果标签很多,这个办法就有点不好使
1. 用负margin
就是把元素的margin设置成负数,这里把button的margin-left
设置成-5px,是可以的。
但是这个办法有一个不好的,就是不同的浏览器的这个间距不同,所以设置的margin-left
是不同的。
2. font-size:0
.container{
font-size: 0px;
}
用这种办法也可以解决间隙的问题,而且不会用兼容性的问题。但是需要注意的是,要给子元素设置字体大小,因为font-size
是一个可以继承的属性。
3. letter-spacing和word-spacing
这两个属性的区别是什么?
letter-spacing
是字符间距,word-spacing
是单词间距。我们可以通过将这两个值设置为负数来消除空隙。而且浏览器兼容性也很好。不同的浏览器间隙大小不同,但是如果用letter-spacing
设置值足够大,就会忽略掉兼容性的问题,而且元素不用重合,word-spacing
如果设置的很大,元素就会重合。所以相比较起来,我更偏向使用letter-spacing
。