Modifying the margins before the first and after the last item in a list

Currently working on compiling an index for an EPUB book, I have structured entries with subentries as shown below:

coal
    anthracite
    bituminous coal
    brown coal
    imports
    reserves
    seams
[next main index entry]

The issue lies in the excess space before the first subentry and after the last subentry. To illustrate, it appears like this:

coal

    anthracite
    bituminous coal
    brown coal
    imports
    reserves
    seams
    
[next main index entry]

Below is the accompanying code snippet:

<body class="rear-matter" id="rear-matter">
<div class="rear-matter">
<h1 class="title" id="index">
<a href="contents.xhtml">Index</a></h1>

    <li epub:type="index-entry">
        <span epub:type="index-term">coal</span>
        <ul epub:type="index-entry-list">
            <li epub:type="index-entry">
                <span epub:type="index-term"><a href="chapter_1169115.xhtml#anthracite" id="coal_reserves">anthracite</a></span>
            </li>
            <li epub:type="index-entry">
                <span epub:type="index-term"><a href="chapter_1174195.xhtml#bituminous coal" id="bituminous_coal">bituminous coal</a></span>
            </li>
            <li epub:type="index-entry">
                <span epub:type="index-term"><a href="chapter_1174195.xhtml#brown coal" id="brown_coal">brown coal</a></span>
            </li>
            <li epub:type="index-entry">
                <span epub:type="index-term"><a href="chapter_1174195.xhtml#coal imports" id="coal_imports">imports</a></span>
            </li>
            <li epub:type="index-entry">
                <span epub:type="index-term"><a href="chapter_1169115.xhtml#coal reserves" id="coal_reserves">reserves</a></span>
            </li>
            <li epub:type="index-entry">
                <span epub:type="index-term"><a href="chapter_1169115.xhtml" id="coal_seams">seams</a></span>
            </li>
        </ul>
    </li>

I suspect the spacing issue originates from the tag <ul epub:type="index-entry-list">, but I am unsure how to rectify it. Is there a way to minimize the space before the first subentry and after the last one?

Many thanks, Tom

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pass the value of a button to jQuery AJAX using the onclick() function

Can a value be passed from a button to Jquery AJAX using the onclick function? I attempted to use this code, but it doesn't seem to be working. Nothing is showing up in the console log. HTML <button type="button" class="hapus_krs" onclick="hapus_ ...

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

What's the significance of the #/ symbol in a URL?

Currently, I am developing Ruby on Rails web applications. The URL of my webpage appears as follows: http://dev.ibiza.jp:3000/facebook/report?advertiser_id=2102#/dashboard From this link, I have identified that the advertiser_id is 2102 but I am unsure a ...

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

Difficulty with JQuery Show and Hide Functionality

I've implemented a jQuery menu, but encountering the issue where clicking on any menu link opens all menus instead of just the one clicked. I've attempted to resolve this by using show and hide classes, however, it seems that nothing is working n ...

How can we determine the dimensions of an absolutely positioned element within a relatively positioned element?

One thing I noticed is that when placing an absolutely positioned element within a relatively positioned element, the latter does not automatically inherit the width and height of the former unless manually set. Take this example: <!DOCTYPE html> ...

Breaking a line within an ngFor loop

I'm working with an ngFor loop to generate multiple PrimeNG buttons. Currently, the buttons are displayed side by side on the same row, but I want each button to appear vertically on its own line. How can this be achieved? Below is the segment of my c ...

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

Format specific words or characters in a text input

In HTML, when I want to display strings in a Text Input or TextArea, I am looking for a way to have specific substrings render with a box around them. I envision these boxed substrings as being treated as a single entity, similar to how highlighting or tex ...

Tips for adjusting image size to take up only half of the screen in NextJS

Struggling to resize an image to fit only 50% of the screen in NextJS? The Image component provided by NextJS comes with its own inline styling, making it tricky to customize. Currently, I attempt to style the image by wrapping the Image component in a spa ...

Align text in the center of multiple <td> elements in a table horizontally

I have a schedule table in the form of a timetable. My goal is to have the borders between two or more consecutive tasks removed. I have achieved this. Additionally, I want the text to be centered within each cell of the table. For clarification, refer to ...

Challenges with incorporating numerous text boxes in real time

There are two text boxes side by side with a "+" sign next to each. When the plus sign is clicked, a new text box appears with both the "+" and "-" signs for adding and removing the text box. I followed instructions from this resource to create my text box ...

Direct your attention to the cursor problem in Internet Explorer

Here is a snippet of code that automatically changes background images: function changeBackground() { currentBackground++; if(currentBackground > 3) currentBackground = 0; $('body').fadeOut(0, function() { $('body&ap ...

Using htaccess to redirect all html pages to php except for one

My website is configured to redirect all html pages to php using htaccess rules: RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^website.com RewriteRule (.*) http://www.website.com/$1 [R=301,L] RewriteRule ^(.+)\.html$ http://www.website.c ...

Finding an element based on its styling attribute, such as its position on the left or right side

One particular block that caught my eye is the slider element: <div id="sliderDispo" class="slider slider-dispo" data-slider-init="" data-slider-color="#0077b5 #EC6E31 #E40B0B" data-slider-step="33" > <div class="slider__interval" ...

Desiring the standard back button feature of a browser to work seamlessly when loading pages via ajax requests

I am currently developing a web application in PHP and implementing the use of AJAX requests to retrieve pages from the server. For example, when a user clicks on menu tabs, an AJAX request is made to the server to fetch the page and load it into a specifi ...

Having trouble with Bootstrap's justify-content property? The "between" or "mr-auto" options

Having trouble with a simple problem, 1 - Why doesn't it work when I add an independent CSS class to the nav_element and set flex and justify-content: between to create space between the anchor tag and the div? 2 - What is the correct approach in Bo ...

What is the best approach for organizing a CSS grids template?

I am trying to utilize CSS grids to arrange the layout of this page as shown below: https://i.sstatic.net/x7epq.png While there are currently only 3 divs, I want to begin by figuring out how to position div 2 and div 3 on the second row in columns 2 and ...

Interactive HTML5 Web Application File Selector

After conducting thorough research, it is important to note that I am well-versed in the security implications of this client-side application which utilizes JavaScript, Vue, and pure HTML5. To initiate the file dialog, I employ a hidden input type file. ...