前端问题更新汇总

目录：

css问题

—来自小白学习过程中遇到的问题笔记

---

如何解决inline-block元素的空白间距

如：

html文件

<button type="button">1</button>
<button type="button">2</button>

css文件
button {
            width: 50px;
            height: 40px;
            display: inline-block;
            background-color: #bbbbbb;
            border:none;
        }

因为两元素换行，div会包含空白，导致1和2两个元素间有间距，大部分浏览器的间距为4px，少部分浏览器的间距为8px。

为了解决这个问题，查阅过几个人的相关说明，学到了以下几种思路

改变HTML结构

1.

<button type="button">1</button><button type="button">
2</button>

2.

<button type="button">1</button
><button type="button">2</button>

3.加注释

<button type="button">1</button><!--
--><button type="button">2</button>

改变margin

margin正的为远离，负的为靠近

<button type="button">1</button>
<button type="button">2</button>

css
button + button{
            margin-left:-4px;
        }

使用font－size

<div style="font-size: 0; -webkit-text-size-adjust:none;
;">
    <button type="button">1</button>
    <button type="button">2</button>
</div>

基本上可以解决大部分浏览器下inline-block元素之间的间距

jquery方法

<div class="removeTextNodes">
    <button type="button">1</button>
    <button type="button">2</button>
</div>

<script type="text/javascript">
    $('.removeTextNodes').contents().filter(function () {
        return this.nodeType === 3;
    }).remove();
</script>

去除nodeType等于3的子节点（即空白的文本节点),从而使1和2元素的间距消失。

小结：相对于第二种通过改margin的方法和第一种改变书写结构的办法，第三种和第四种方法显得更普遍，适用性更强。