这是一个老生常谈的问题了，但是就是这么的一个我们经常碰到的问题，这次同事就又问到我了，我也就趁机回忆了一下，想着记录一下，希望能给大家帮助吧。
如何去除系统默认的边距呢？
这个问题看起来很好回答，因为我们学习css时的第一课时我们就知道了，一些标签自带有一些属性，例如ul：
这就是一个典型的问题，这个ul有着明显的margin和padding，怎么出去呢？我们在写css的开始阶段就要消除这种差异，那么就需要这么两行代码了：
* {
margin: 0;
padding: 0;
}
我们来看下效果，
确实没有padding和margin了，但是真的解决了么？假如我们在加上一个ul呢？
貌似没有什么问题，但是当我们把这两个ul都变成inline-block元素时再来看一下效果，
中间的缝隙是怎么回事呢？不是将系统默认的边距都设为零了么，怎么还会存在这种情况呢？这是因为这两个ul之间有多余的字符。在浏览器解析的时候，将换行也当成了一个字符。知道问题就好解决了，我们不让这个换行符出现不就可以了么。
<ul><li>这是第一个ul</li></ul><ul><li>这是第二个ul</li></ul>
看看效果，
这个问题貌似解决了，但是还有一点问题，这个ul下面只有一个li，假如有很多个呢，难道我们碰到这种情况都得这样设置么，那样会改变原来的代码结构，并且都挤在一起也不方便维护，那么怎么解决呢？看下面这种方法，
body {
font-size: 0px;
}
因为我这里这两个ul的父级就是body，所以我就直接给body设置这个了，其实就是直接给其父级设置这个属性就可以了，看看效果，
这种方法好是好，就是有一个问题，你将其父级的font-size设为0了，那么势必会对接下来的布局产生影响，就是他下面的所有的子级假如有字体的话都得重新设置，其实我是赞同这种做法的，就是麻烦了一点，如果其子级字体少了的话用这个还是很方便的。当然还有人肯定要问有这么一点缝隙对布局影响不大，可以选择性的忽视掉了，但是就是这么一个小的属性，造成的危害可以一点都不小，看下各个浏览器的差异吧，
谷歌，我测试了一下，中间的缝隙是5px。
360极速模式，经过测试，中间的缝隙是8px。
360极速模式，经过测试，中间的缝隙是4px。
IE浏览器，经过测试，中间的缝隙是4px。
这是一个尴尬的问题，就是这么一个简单的问题，对于我们前端人员来说都不是一个小问题，我们必须慎重对待。将其统一是很有必要的。那么除了这些还有其他的方法么？答案肯定是有的。
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
其实我们这么考虑这个问题也是因为布局的原因，我们也可以使用flex这个属性，就不用在考虑这个因素了，把这个权利交还给浏览器，浏览器会将div安排好的，上面的是flex的兼容性写法，只需要将其对应的classname写入对应的div中就可以了，是不是很方便。世上没有完美的事情，这个也不例外。这个属性有一个致命的问题就是兼容性问题，因为这个属性是2009年才提出的，所以对于比较旧的浏览器兼容性不是很好，如果你们公司不考虑兼容性这个问题，你就可以放心的使用了。就IE浏览器而言，只需要专门写个属性就好了，这样就可以很好的显示了。
其实上面的几个方法都可以使用，具体情况具体分析，选择一个最适合的才是最好的。希望可以对大家有所帮助。