Css列奇怪的高度

Question

我有列，需要在背景的顶部和底部有15个填充

https://jsfiddle.net/d5hd6zae/

.b-cat_outer {
    background-color:#f5f5f5;
    margin-bottom:30px;
    overflow: hidden;
}

.b-cat{
	padding:15px 15px 0px;
	margin-bottom: 15px;
	-webkit-columns: 4;
	-moz-columns: 4;
	columns: 4;
	-webkit-column-gap: 10px;
	-moz-column-gap: 10px;
	column-gap: 10px;
}
.b-cat__item{
    position: relative;
	color:#000;
	font-size:13px;
	padding:0;
	margin:0 0 10px;
	line-height:1.4;
	font-family:Arial, Helvetica, sans-serif;
	white-space:nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
	}

.b-cat__item:last-child {
    margin-bottom: 0;
}
   
.b-cat__link{
    color: #026dc0;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    text-decoration: none;
	 float:left;
	}
.b-cat__link:hover{
	color:#8c0400;
   }

<div class="b-cat_outer">    
    <div class="b-cat">
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Fisrt</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Second</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Third</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Other</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Another</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Once more</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Third</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Other</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Another</a>
        </div>
        <div class="b-cat__item">
            <a class="b-cat__link" href="#">Once more</a>
        </div>
    </div>
</div>

元素高度为18px。 Emement底部保证金为10px。 最后一个元素底部边距为0.

但外部块高度为55px（当两行时）。为什么？我希望它应该是46。