为什么LI有这么多空间

<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;
}

Trying to figure out where is there so much space between the text and the blue line above.

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

leftQuote image:

How do I modify so that the space above and below the blue line are the same?

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

Source shows this:

消息来源显示:

1 个解决方案

#1

That blue line is coming from a border-bottom property on your spnTextLI class. The reason it is so close to the above text is because the border is coming from the div that that text is inside.

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

If you increase the padding-bottom property of your spnTextLI class, the border will be pushed further away from the text above it.

如果增加spnTextLI类的padding-bottom属性,则边框将被推离其上方的文本。