为什么LI有那么多空间

Question

<div id="patTest">
    <ul id="patTestUL">
        <li>
            <div class="dvInnerLI">
                <span class="spnImgLI"><img src="theImages/leftQuote.png" alt="Quote" style="width: 15px; height: 15px; padding-right: 10px;" /></span>
                <span class="spnTextLI">It is a great medical group; staff is very accommodating to patient needs.</span>
            </div>
        </li>
        <li>
            <div class="dvInnerLI">
                <span class="spnImgLI"><img src="theImages/leftQuote.png" alt="Quote" style="width: 15px; height: 15px; padding-right: 10px;" /></span>
                <span class="spnTextLI">@WG has the nicest doctors & staff! #A+.</span>
            </div>
        </li>
        <li>
            <div class="dvInnerLI">
                <span class="spnImgLI"><img src="theImages/leftQuote.png" alt="Quote" style="width: 15px; height: 15px; padding-right: 10px;" /></span>
                <span class="spnTextLI">Thanks @WG #Yonkers in & out in 15 minutes to have my blood taken. The nurse was fabulous, too!</span>
            </div>
        </li>
    </ul>
</div>

#patTestUL {
    width: 100%;
    margin: auto;
}
#patTestUL li {
    margin: 0;
    padding: 0;
}
.dvInnerLI {
    padding: 0;
    margin: 0;
    width: 98%;
    text-align: center;
}
.spnImgLI {
    width: 20%;
    text-align: right;
}
.spnTextLI {
    color: #000000;
    width: 76%;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    border-bottom: 2px solid #CEE9F6;
    padding-bottom: 4px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

试图弄清楚文本和上面的蓝线之间有多大的空间。

leftQuote图片：

如何修改以使蓝线上方和下方的空格相同？

来源显示：

Answer 1

该蓝线来自border-bottom课程的spnTextLI属性。它与上述文本如此接近的原因是因为边框来自文本所在的div。

如果您增加padding-bottom课程的spnTextLI属性，则边框将被推离其上方的文字。