Adding space between buttons?

Asked 14/7, 2013 at 21:44 Answered 15/7, 2013 at 0:9

Hi I have a code here that is all perfect except one thing. There is NO space between each button in the code. I've tried margin, but unfortunately its an unordered list so I am a bit confused. What would I add or replace to have space between the two buttons. Help?? :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">

    .rollovericons a#terms{
        display: block;
        width:138px;
        height:27px;
        background:  url(http://icpy.webs.com/button/Terms.png) no-repeat;
    }

    .rollovericons a:hover#terms{
        background: url(http://icpy.webs.com/button/Terms0.png) no-repeat;
    }
    .rollovericons a#contact{
        display: block;
        width:138px;
        height:27px;
        background:  url(http://icpy.webs.com/button/contact.png) no-repeat;
    }

    .rollovericons a:hover#contact{
        background: url(http://icpy.webs.com/button/contact0.png) no-repeat;
    }

</style>

<body>

<div class="rollovericons">
    <a href="http://www.twitter.com" id="terms"></a>
    <a href="http://www.twitter.com" id="contact"></a>
</div>

</body>

Abby answered 14/7, 2013 at 21:44 Comment(3)

Your HTML does not include an unordered list. I don't think you have tried setting a margin or padding. – Striction 14/7, 2013 at 21:47

Just add the margin-right rule to the first button styling, or margin-left to the second one. – Entrance 14/7, 2013 at 21:48

Hi George, try use " " between the buttons. – Nina 12/11, 2016 at 18:7

Just do:

.rollovericons a{
    margin: 10px;
}

That will add a margin to every <a> item inside the rollovericons class.

Atterbury answered 14/7, 2013 at 21:49 Comment(0)

I added a class called space which will add a space in betwween the buttons.

heres the jsfiddle for you to see: http://jsfiddle.net/mFfAX/

.space {margin-bottom:15px}

Winni answered 15/7, 2013 at 0:9 Comment(0)

Try this:

.rollovericons ul li {
display: inline;
list-style-type: none;
padding-right: 7px;
}

<div class="rollovericons">
<ul>
<li><a href="http://www.twitter.com" id="terms"></a></li>
<li><a href="http://www.twitter.com" id="contact"></a></li>
</ul>
</div>

Shugart answered 14/7, 2013 at 21:51 Comment(0)

Recommended topics

Hot tags