问题背景：
一个幻灯片效果如图：
已知结构如下：
<div class="slide">
<div class="pointer"><i class="current"></i><i></i><i></i></div>
</div>要求如效果图中标注，幻灯（slide）宽200px，高100px，指示器（pointer）在右下角，距离右边10px距离下边10px，指示器中的三个圆直径为10px，背景为黑色，间距为5px，当前选中项（current）为白色背景.
我的思路：
要使右下角的指示器元素 div[.pointer] 处于图片上方右下角，距离右边框10px，距下边框10px的位置，那么，必然要使 div[.pointer] 从 normal flow 中脱离出来。
使用position:absolute倒没什么问题，但这里我突发奇想的想对 div[.pointer] 设置float:left来实现，那么问题来了：
css代码如下：
body{margin: 0 auto;}
.slide{position: relative;width: 200px;height: 100px;background-color:#bdd7ee;}
.slide .pointer{float: left;margin-top: 50px;margin-left: 150px;outline : 1px solid red;}
.pointer i{display: inline-block;width: 10px;height: 10px;margin-left: 5px;border-radius: 50%;background-color: #000;outline: 1px solid red;}
.pointer i.current{background-color: #fff}状况描述：
当div[class=pointer]margin-left为150px,margin-top为50px时，总体还没超出div[class=slide]区域，如下图1：
但是当margin-left为180px，margin-top为80px时，情况如下图2：
当margin-left为200px，margin-top为100px时，情况如下图3：
问题：
⑴在图一中，三个小圆点上下的空白部分是怎么形成的？div[class=pointer]我并没有设置高度，高度按理说应该是里面内容的高度吧...我试过为div[class=pointer]添加padding:0px还有给 i元素 添加margin:0px ,并没有消除；但是给 i元素 添加float:left倒是可以消除...为什么会出现这种情况呢？
⑵在图二中我们可以看到，inline-block元素 i元素 被挤出去了；在图三中，三个inline-block元素更是垂直排列....为何会出现这样的情况？
请各位大大不吝赐教！！
设置slider-control 的宽度然后用position定位，然后小圆点float处理
.slide .pointer{float: left;margin-top: 50px;margin-left: 150px; width:60px; outline : 1px solid red;}
.pointer i{display: inline-block;width: 10px;height: 10px;margin-left: 5px;border-radius: 50%;background-color: #000;outline: 1px solid red;}
.pointer i.current{background-color: #fff}1、关于第一个问题“三个小圆点上下的空白部分是怎么形成的？”。
这三个小圆点的“display”属性设置“inline-block”时，它们的“vertical-align”是默认值：baseline,也就是基线对齐,周围因此会产生空隙。
2、建议一个利用“text-align”属性对三个圆点排版，比如圆点在右下角.slide .pointer{float: left;margin-top: 70px;text-align:right; width:60px; outline : 1px solid red;}