给li标签中的span设置属性margin-bottom不生效

给li标签中的span设置属性margin-bottom不生效

html如下：

 <ul class="lottery_main"">
            <!-- 每个中间人的头像和名字 -->
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>  
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>  
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
              <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>  
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>  
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
              <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>  
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li> 
            <li class='li25'>
                <span class="lottery_name25">飘飘飘</span>
            </li>
   </ul>

css如下：

.lottery_main {
    position: relative;
    width: 100%;
    display:none;
    text-align:center;
}

.lottery_main li{
    margin: 0;
    padding: 0;
    width: 19%;
    display: inline-block;
    

}


.lottery_name25{
    font-size: 17px;
    margin-left: 13px;
    margin-bottom: 17px;
}

显示的效果如下：

给span设置的margin-bottom没有生效

如果给.lottery  li添加属性height，即：

.lottery_main li{
    margin: 0;
    padding: 0;
    width: 19%;
    display: inline-block;
    height:52px;

}

显示效果如下：

总结：在li标签里面包含span标签，如果要给span设置margin-bottom属性，那么要同时设置li的display:block(display:inline-block)和height属性，那么给span设置的margin-bottom才生效。