Forum Moderators: not2easy
I would like for each button to have 5px on-top and on-bottom, aswell as 5px between each one.
However, I'm having a devil of a time doing it.
Could somebody show me what I must be doing wrong?
Thanks!
***********
<html>
<head>
<style type="text/css">
.black{width:748px;height:50px;background:#000}
#button{margin:5px 0}
#button a{width:239px;height:30px;background:#888;float:left;color:#fff;border:1px solid #000;line-height:28px;padding-left:5px}
#button a:hover{color:#000;background:#eee}
#b1 a,#b2 a{margin:0 5px 0 0}
</style>
</head>
<body>
<div class="black"></div>
<div id="button">
<a href="/1/" id="b1">1</a>
<a href="/2/" id="b2">2</a>
<a href="/3/" id="b3">3</a>
</div>
<div class="black"></div>
</body>
</html>
<html>
<head>
<style type="text/css">
.black {width:748px;height:50px;background:#000;}
#button {margin:5px 0;}
#button a {width:239px;height:30px;background:#888;float:left;color:#fff;border:1px solid #000;line-height:28px;padding-left:5px;}
#button a:hover {color:#000;background:#eee;}
#b1,#b2 {margin:0 5px 0 0;}
br.clear {clear:both;}
</style>
</head>
<body>
<div class="black"></div>
<div id="button"><a href="/1/" id="b1">1</a>
<a href="/2/" id="b2">2</a>
<a href="/3/" id="b3">3</a><br class="clear" /></div>
<div class="black"></div>
</body>
</html>