行内元素默认间距的4种解决办法

相信很多小伙伴在页面布局上都碰到过行内元素之间存在默认的间隙的问题。其实这是因为行内块元素之间，浏览器会有一个默认的间距。如图：

解决的办法有四种：

1.html中将行内元素在同一行显示，不影响美观即可

    <div class="main">
        <!-- 在html中将行内元素在同一行显示，不影响美观即可 -->
        <div class="left"></div><div class="middle"></div><div class="right"></div>
    </div>

2. 在父元素上设置font-size: 0px;

 <div class="main">
		<div class="left"></div>
        <div class="middle"></