How to create space between inline-block buttons?

Question

I am very new to this, so sorry for any misuse of vocab. I want to have a space between two buttons, which have an inline-block display. The "margin" property doesn't do what I need it to do.

CSS:

.pagination{
    background:#155484;
    padding:20px;
    border:2px solid #155484;
    border-radius:3px;
    position:absolute;
    left:75%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
}

.pagination a{
    color:#fff;
    text-decoration:none;
}

HTML

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <a href="{PreviousPage}">&larr;</a>
            {/block:PreviousPage}
            {block:NextPage}
                <a href="{NextPage}">&rarr;</a>
            {/block:NextPage}
        {/block:Pagination}
</div>

(This is using Tumblr-specific variables.)

Also if there's anything in here that can be changed or omitted, that would be great to know!

Answer 1

CSS:

.pagination{
    position:absolute;
    right:18%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

.pagination a{
    color:#fff;
    text-decoration:none;
    font-size:25px;
}

.back{
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:left;
}

.next{
    margin-left:10px;
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:right;
}    

HTML:

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <div class="back">
                <a href="{PreviousPage}">《</a>
                </div>
            {/block:PreviousPage}
            {block:NextPage}
                <div class="next">
                <a href="{NextPage}">》</a>
                </div>
            {/block:NextPage}
        {/block:Pagination}
</div>