第一个li超前30px左右距离？没有内部margin-left没有padding-left也不存在别的格子影响的问题控制台

Question

<div class="col-md-7">
                <div class="news clearfix">
                    <ul>
                        <li><img src="/images/alibaixiu.png" alt=""><div class="txt">阿里百秀</div></li>
                        <li><img src="/images/1.jpeg" alt=""><div class="txt">阿里百秀</div></li>
                        <li><img src="/images/1.jpeg" alt=""><div class="txt">阿里百秀</div></li>
                        <li><img src="/images/1.jpeg" alt=""><div class="txt">阿里百秀</div></li>
                        <li><img src="/images/1.jpeg" alt=""><div class="txt">阿里百秀</div></li>
                    </ul>
                </div>
</div>

.news ul li {
    overflow: hidden;
    padding-right: 10px;
    position: relative;
    float: left;
    width: 25%;
}
.news ul li:nth-child(n+4) {
    margin-top: 10px;
}
.news ul li img {
    width: 100%;
    height: 100%;   
}
.news ul li .txt {
    position: absolute;
    left: -10px;
    text-align: center;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    height: 41px;
    line-height: 41px;
    color: white;
}
.news ul li:nth-child(1) {
    width: 50%;
    height: 260px;
    font-size: 20px;
}
.news {
    margin-bottom: 20px;
}
.news ul li:nth-child(n+2) {
    height: 125px;
    width: 169px;
    font-size: 15px;
    
}

仅第一个格子出现问题

Answer 1

加上这个，然后再写CSS。以后写DIV+CSS，要消除（重置）一下元素自带一些属性。有很多，不知道可以找各大网站F12看下他们设置的CSS默认属性，拿过来用就行了。

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}