原因:

img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px。

处理方法:

给图片添加vertical-align:top/middle/bottom  display:block; float

父元素添加font-size:0;

htmlcss
    <div class="main-box">
        <div class="container">
            <img src="http://jiuaibuni.top/dome/img/tab1.jpg">
        </div>
    </div>
    <div class="main-box">
        <div class="container">
            <img class="ture" src="http://jiuaibuni.top/dome/img/tab1.jpg">
        </div>
    </div>
    .main-box,.container,.main-box img{
        width: 100%;
        height: 100%
    }
    .main-box{
        position: relative;
        background-color: black;
    }
    .ture{
        vertical-align:top;
        vertical-align:middle;
        vertical-align:bottom;
        display:block;
        float: left;
    }

试一试


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。