删除div以下的异常填充

Question

I've a div which is showing unusual padding at the bottom . As you can see the red bordered div in the picture. Here's the code. The red div is assigned the all-inner_captions class . If I set the height of all-inner_captions to auto than it works but this breaks the transition I've defined in css below .

Here's the JSFiddle

HTML

<div class="section">
    <ul>
        <li class="horz-inline-all" style="background-image: -webkit-linear-gradient( rgba(0,0,0,0) 50%,rgba(0,0,0,1)),url(http://localhost/teleprintblog/assets/img/melbourne.jpg); 
           background-image: -o-linear-gradient( rgba(0,0,0,0) 50%,rgba(0,0,0,1)),url(http://localhost/teleprintblog/assets/img/melbourne.jpg); 
           background-image: -moz-linear-gradient( rgba(0,0,0,0) 50%, rgba(0,0,0,1)),url(http://localhost/teleprintblog/assets/img/melbourne.jpg);
           background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1)),url(http://localhost/teleprintblog/assets/img/melbourne.jpg);
           background-size: cover;">
           <div class="all-inner_captions">

               <div class="all-image">
                   <img src="" class="horz-inline-all-profileimg" />
               </div>

               <div class="horz-inline-all-title">                         
                   This is a title This is a title This 
               </div>
           </div>

       </li>
   </ul>                

</div>

CSS

        .container .section{
            position: relative;
            width:18%;
            float:left;
            height:89%;
            padding:0;
            margin:0;
        }
        .container .section ul{
            display:block;
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
        .container .section ul li{
            display: inline;
            border:2px solid #F0F;
            float:left;
            width:100%;
            margin:0;
            padding:0;
            height:100%;
            overflow:hidden;
            position:relative;
        }
        .container .section .horz-inline-all{
            display:block;
            margin:1px;
            width:99.3%;
            height:99.6%;
        }
        .container .section .all-inner_captions{
            overflow:hidden;
            position: absolute;
            width:95%;
            bottom:0;
            margin-left:1%;
            border:2px solid #F00;
        }

        .container .section .all-inner_captions .all-image{
            border:3px solid #3CC;
            float:left;
            display:inline;
            width:13%;
        }

        .container .section .all-inner_captions .horz-inline-all-profileimg{
          position:relative;
          height:70px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          -webkit-border-radius: 99em;
          -moz-border-radius: 99em;
          border-radius: 99em;
          border: 2px solid #eee;
          display:inline;
          box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);  
        }

        .all-inner_captions{
            transition-property : margin;
            -webkit-transition  : all .8s ease;
            -moz-transition     : all .8s ease;
            -ms-transition      : all .8s ease;
            -o-transition       : all .8s ease;
            transition          : all .8s ease;
            height:30%;
        }
        .horz-inline-all:hover > .all-inner_captions{
            height:70%;
        }
        .responsive-image{
            width:100%;
            background-size:100% 100%;
            height:100%;
        }

Answer 1

That's not a padding issue. You just have to play around with the
height s of .all-inner_captions and .horz-inline-all:hover > .all-inner_captions

Here's one where the height s are 20% and 80% respectively (instead of 30%:70%)

Answer 2

The problem (I think) is that you have the class .all-inner_captions set to have a height of 30%. This is larger than the all-image div and gives you the extra "padding"