htmlcssxhtmlepub

How to change spacing before 1st and after last element in a list


I'm creating an index for an EPUB book. I have created entries that have subentries, such as the following:

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

Here "coal" is the main index entry, and "anthracite", etc., are subentries. The problem is that there is too much space before the first subentry and after the last subentry. (Note: not BETWEEN the individual subentries.) That is, it looks like this:

coal

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

Here is the code:

<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 think that the spacing has to do with the tag <ul epub:type="index-entry-list">, but I don't know how to change it. How can I reduce the space before the first subentry and after the last subentry?

Thank you, Tom


Solution

  • You are probably looking for something like this:

    ul {
      margin-block-start: 0.2em;
      margin-block-end: 1em;
    }
    

    More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start