html - 为什么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

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

如果您增加 spnTextLI 类的 padding-bottom 属性，边框将被推得离它上面的文本更远。