Q:

Adjusting the text line height in HTML/CSS

I'm creating a very simple checkout UI with bootstrap. Here's what I have so far:

                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                    </ul>

How do I get the "Product Name" rows closer together? There's no top or bottom margins/padding.. so I'm not too sure how to achieve this.
Any help would be much appreciated!

A:

Bootstrap set the body element with line-height: 24px; and the .row element is inheriting it... You should set the line-height of the .row element inside your list group...
.list-group-item .row {
    line-height: 10px;
}

li.list-group-item .row {
    line-height: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                        <li class="list-group-item bg-light px-0">
                            <h6 class="my-0">Category Name</h6>
                            <div class="row">
                                <div class="col text-left"><small class="lh-condensed">Product Name</small></div>
                                <div class="col text-right"><small class="lh-condensed">$100.00</small></div>
                            </div>
                            <div class="row">
                                <div class="col text-left"><small>Product Name</small></div>
                                <div class="col text-right"><small>$130.39</small></div>
                            </div>
                        </li>
                    </ul>

