Remove space between result items

Question

This is in SharePoint Online using a Modern search results template. I managed to hide most of what I needed using CSS. I just cannot seem to find and remove the space between the line items.

It shows the site titles and I can click the hyperlink to bring me to the site, but then between each item, it is about 7 or 8 blank lines.

When I use Chrome's developer tools I get ==$0, whatever that means.

 <content id="data-content">

    <style>
        /* Insert your CSS overrides here */ .template--defaultList template--promotedResults{
visibility: hidden;
}
.placeholder--shimmer placeholder--line{ visibility: hidden;
}
.template--listItem--author{ visibility: hidden;
}
.template--listItem--date{ visibility: hidden; }

.root-40{ visibility: hidden; }


        
        .example-themePrimary a {
            color: {
                {
                    @root.theme.palette.themePrimary
                }
            }
            ;
        }
        
        {
            {
                #unless @root.properties.layoutProperties.showItemThumbnail
            }
        }
        
        .template--listItem--result {
            flex-basis: 100%!important;
        }
        
        {
            {
                /unless
            }
        }
    </style>

    <div class="template">

        {{#if @root.properties.showSelectedFilters}}
        <pnp-selectedfilters data-filters="{{JSONstringify filters.selectedFilters 2}}" data-filters-configuration="{{JSONstringify filters.filtersConfiguration 2}}" data-instance-id="{{filters.instanceId}}" data-operator="{{filters.filterOperator}}" data-theme-variant="{{JSONstringify @root.theme}}">
        </pnp-selectedfilters>
        {{/if}}
        {{#if @root.properties.showResultsCount}}
        <div class="template--resultCount">
            <label class="ms-fontWeight-semibold">{{getCountMessage @root.data.totalItemsCount @root.inputQueryText}}</label>
        </div>
        {{/if}}
        {{#if @root.data.promotedResults}}
        <ul class="template--defaultList template--promotedResults">
            {{#each @root.data.promotedResults as |promotedResult|}}
            <li>
                <div>
                    <pnp-icon data-name="MiniLink" aria-hidden="true"></pnp-icon>
                </div>
                <div>
                    <a href="{{url}}" style="color:{{@root.theme.semanticColors.link}}">{{title}}</a>
                    <div>{{description}}</div>
                </div>
            </li>
            {{/each}}
        </ul>
        {{/if}}
        <ul class="template--defaultList">
            {{#each data.items as |item|}}
            <li class="template--listItem" tabindex="0">
                {{#> resultTypes item=item}}
                <div class="template--listItem--result">
                    {{#if @root.properties.layoutProperties.showFileIcon}}
                    <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>
                    {{/if}}
                    <div class="template--listItem--contentContainer">
                        <span class="template--listItem--title example-themePrimary">
                            <a href="{{slot item @root.slots.PreviewUrl}}" target="_blank" style="color:{{@root.theme.semanticColors.link}}" data-interception="off">{{slot item @root.slots.Title}}</a>
                        </span>
                        <span>                            
                            <span class="template--listItem--author">
                                {{#with (split (slot item @root.slots.Author) '|')}}
                                    {{[1]}}
                                {{/with}}
                            </span>
                            <span class="template--listItem--date">{{getDate (slot item @root.slots.Date) "LL"}}</span>                            
                        </span>                        
                        <div>{{getSummary (slot item @root.slots.Summary)}}</div>
                        <div class="template--listItem--tags example-themePrimary">
                            {{#if (slot item @root.slots.Tags)}}
                            <pnp-icon data-name="Tag" aria-hidden="true" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-icon>
                            {{#each (split (slot item @root.slots.Tags) ",") as |tag| }}
                            <a href="#{{slot item @root.slots.Tags}}:'{{trim tag}}'">{{tag}}</a> {{/each}} {{/if}}
                        </div>
                    </div>
                </div>
                {{#if @root.properties.layoutProperties.showItemThumbnail}}
                <div class="template--listItem--thumbnailContainer">
                    <div class="thumbnail--image">
                        <pnp-filepreview data-preview-url="{{slot item @root.slots.PreviewUrl}}" data-preview-image-url="{{slot item @root.slots.PreviewImageUrl}}" data-theme-variant="{{JSONstringify @root.theme}}">
                            <img alt='preview-image' width="120" src="{{slot item @root.slots.PreviewImageUrl}}" loading="lazy" onerror="this.onerror=null;this.src='{{@root.utils.defaultImage}}';" />
                        </pnp-filepreview>
                        <div class="thumbnail--hover">
                            <div>
                                <pnp-icon data-name="DocumentSearch" aria-hidden="true"></pnp-icon>
                            </div>
                        </div>
                    </div>
                </div>
                {{/if}} {{/resultTypes}}
            </li>
            {{/each}}
        </ul>

        {{#if @root.properties.paging.showPaging}} {{#gt @root.data.totalItemsCount @root.properties.paging.itemsCountPerPage}}
        <pnp-pagination data-total-items="{{@root.data.totalItemsCount}}" data-hide-first-last-pages="{{@root.properties.paging.hideFirstLastPages}}" data-hide-disabled="{{@root.properties.paging.hideDisabled}}" data-hide-navigation="{{@root.properties.paging.hideNavigation}}"
            data-range="{{@root.properties.paging.pagingRange}}" data-items-count-per-page="{{@root.properties.paging.itemsCountPerPage}}" data-current-page-number="{{@root.paging.currentPageNumber}}" data-page-links="{{JSONstringify @root.data.paging.links}}"
            data-theme-variant="{{JSONstringify @root.theme}}">
        </pnp-pagination>
        {{/gt}} {{/if}}

    </div>
</content>

<content id="placeholder-content">
    <style>
        /* Insert your CSS overrides here */
.root-40{ visibility: hidden; }
    </style>

    <div class="placeholder">
        {{#if @root.properties.showResultsCount}}
        <div class="template--resultCount">
            <span class="placeholder--shimmer placeholder--line" style="width: 20%"></span>
        </div>
        {{/if}}
        <ul class="template--defaultList">
            {{#times @root.properties.paging.itemsCountPerPage}}
            <li class="template--listItem" tabindex="0">
                <div class="template--listItem--result">
                    {{#if @root.properties.layoutProperties.showFileIcon}}
                    <div class="template--listItem--icon placeholder--shimmer "></div>
                    {{/if}}
                    <div class="template--listItem--contentContainer">
                        <span class="placeholder--shimmer placeholder--line" style="width: 60%"></span>
                        <span class="placeholder--shimmer placeholder--line" style="width: 100%"></span>
                        <span class="placeholder--shimmer placeholder--line" style="width: 100%"></span>
                        <span class="placeholder--shimmer placeholder--line" style="width: 35%"></span>
                        <span class="placeholder--shimmer placeholder--line" style="width: 20%"></span>
                    </div>
                </div>
                {{#if @root.properties.layoutProperties.showItemThumbnail}}
                <div class="template--listItem--thumbnailContainer">
                    <div class="thumbnail--image">
                        <div class="placeholder--shimmer" style="width: 120px;height: 70px;"></div>
                    </div>
                </div>
                {{/if}}
            </li>
            {{/times}}
        </ul>
    </div>

</content>

Answer 1

I just cannot seem to find and remove the space between the line items.

You need to explicitly set the margin of the uls to zero. So inside the <style> tag, add another CSS rule as follows:

ul {
  margin: 0;
}

The reason is that the browser usually sets some styles on HTML elements by itself. All browsers keep a "user agent stylesheet", where some defaults are set for accessibility.

That is why in most CSS libraries and files, the first rule usually "unsets" or initializes all style values like as follows:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

That helps to ensure that all the styles reflect exactly the way they are being set by you the developer. Or in other words, to override all browser-set styles.

When I use Chrome's developer tools I get ==$0, whatever that means.

$0 is the last selected DOM node index. Chrome assigns an index to each DOM node you select. So $0 will always point to the last node you selected, while $1 will point to the node you selected before that. Think of it as a stack of the most recently selected nodes.

Check this Stackoverflow answer for more.