老师请教一下，遇到一个小问题

.con-but {
    width: 1600px;
    margin: 0 auto;
}
.con-but .b-top,
.con-but .b-but{
    margin: 0;
    padding: 0;
}
.b-top .t-img,
.b-top .t-word,
.b-but .b-img,
.b-but .b-word{
    float: left;
    position: relative;
}
.b-top .t-img img,
.b-but .b-img img{
    width: 400px;
    height: 300px;
}
.b-top .t-word,
.b-but .b-word{
    width: 340px;
    height: 260px;
    padding: 20px 30px;
    background: #85e5e4;
}
.word-horn-right{
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #85e5e4;
    position: absolute;
    top: 50%;
}
.word-horn-left{
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 25px solid #85e5e4;
    border-bottom: 15px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    right: 0;
    top: 50%;
}
.b-top .t-word h3,
.b-but .b-word h3{
    color: white;
    font-family: "微软雅黑";
    margin-bottom: 20px;
}
.t-word p:nth-child(even),
.b-word p:nth-child(even){
    color: white;
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px;
}
.t-word p:nth-child(odd),
.b-word p:nth-child(odd){
    color: #f9f9f9;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 40px;
}
.t-word button,
.b-word button{
    padding: 10px;
    background: black;
    color: white;
    border: 2px solid #85e5e4;
    text-align: center;
}
.t-word-but{
    text-align: center;
}
.t-word button:hover,
.b-word button:hover{
    background: transparent;
    color: black;
    border: 2px solid black;
}

            <div class="con-but">
                <div class="b-top">
                   <div class="t-img">
                        <div class="word-horn-left"></div>
                       <img src="img/b1.jpg">
                   </div>
                   <div class="t-word">
                       <h3>Library-1</h3>
                        <p>There are many variations of passages of Lorem Ipsum available.</p>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
                        <div class="t-word-but">
                            <button>EXPLORE</button>
                        </div>
                   </div>
                   <div class="t-img">
                        <div class="word-horn-left"></div>
                       <img src="img/b2.jpg">
                   </div>
                   <div class="t-word">
                       <h3>Library-2</h3>
                        <p>There are many variations of passages of Lorem Ipsum available.</p>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
                        <div class="t-word-but">
                            <button>EXPLORE</button>
                        </div>
                   </div>
                   <div class="clear"></div>
                </div>
                <div class="b-but">
                    <div class="b-word">
                        <h3>Library-3</h3>
                        <p>There are many variations of passages of Lorem Ipsum available.</p>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
                        <div class="t-word-but">
                            <button>EXPLORE</button>
                        </div>
                    </div>
                    <div class="b-img">
                        <div class="word-horn-right"></div>
                        <img src="img/b3.jpg">
                    </div>
                    <div class="b-word">
                        <h3>Library-4</h3>
                        <p>There are many variations of passages of Lorem Ipsum available.</p>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
                        <div class="t-word-but">
                            <button>EXPLORE</button>
                        </div>
                    </div>
                    <div class="b-img">
                        <div class="word-horn-right"></div>
                        <img src="img/b4.jpg">
                    </div>
                   <div class="clear"></div>
                </div>
            </div>

这里多出4px边距，但是我尝试给上下盒子限制高度，就出现变形，是为什么呢？